First Tailwind component (Hello World) - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a simple heading with Tailwind styling.

Tailwind

<h1 class="text-[1] font-bold">Hello World</h1>

Drag options to blanks, or click blank then click option'

Alg

Bmd

Cxl

Dsm

Attempts:

3 left

💡 Hint

Common Mistakes

Using text-sm or text-md which are smaller sizes.

Forgetting to add the font-bold class for bold text.

The class text-xl sets the font size to extra large, making the heading stand out nicely.

2fill in blank

medium

Complete the code to add padding around the heading using Tailwind.

Tailwind

<h1 class="text-xl font-bold [1]">Hello World</h1>

Drag options to blanks, or click blank then click option'

Ap-4

Bpt-4

Cm-4

Dpl-4

Attempts:

3 left

💡 Hint

Common Mistakes

Using margin (m-4) instead of padding (p-4).

Using only one side padding like pt-4 or pl-4 instead of all sides.

The class p-4 adds padding on all sides of the element, creating space inside the border.

3fill in blank

hard

Fix the error in the Tailwind class to center the text horizontally.

Tailwind

<h1 class="text-xl font-bold [1] p-4">Hello World</h1>

Drag options to blanks, or click blank then click option'

Atext-center

Btext-left

Ctext-right

Dtext-justify

Attempts:

3 left

💡 Hint

Common Mistakes

Using text-left or text-right which align text to sides.

Using text-justify which spreads text unevenly.

The class text-center centers the text horizontally inside the element.

4fill in blank

hard

Fill both blanks to create a blue background and white text color.

Tailwind

<h1 class="text-xl font-bold [1] [2] p-4 text-center">Hello World</h1>

Drag options to blanks, or click blank then click option'

Abg-blue-500

Bbg-red-500

Ctext-white

Dtext-black

Attempts:

3 left

💡 Hint

Common Mistakes

Using red background instead of blue.

Using black text on blue background which is hard to read.

bg-blue-500 sets a medium blue background color, and text-white makes the text white for good contrast.

5fill in blank

hard

Fill all three blanks to create a responsive container with padding and centered text.

Tailwind

<div class="[1] mx-auto [2] [3]">Hello World</div>

Drag options to blanks, or click blank then click option'

Amax-w-md

Bp-6

Ctext-center

Dbg-gray-100

Attempts:

3 left

💡 Hint

Common Mistakes

Using background color instead of width or padding classes.

Forgetting to center the text inside the container.

max-w-md limits the container width for better readability, p-6 adds padding inside, and text-center centers the text horizontally.