Why visual boundaries matter in Tailwind - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a visible border around the box.

Tailwind

<div class="p-4 [1]">
  This box has a border.
</div>

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

Arounded-lg

Bbg-gray-200

Ctext-center

Dborder-2 border-gray-500

Attempts:

3 left

💡 Hint

Common Mistakes

Using background color instead of border classes.

Forgetting to specify border thickness.

Adding border-2 border-gray-500 creates a visible border around the box, showing its boundaries clearly.

2fill in blank

medium

Complete the code to add padding inside the box so content doesn't touch the border.

Tailwind

<div class="border-2 border-blue-600 [1]">
  Content with space inside the border.
</div>

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

Am-4

Btext-lg

Cp-6

Dflex

Attempts:

3 left

💡 Hint

Common Mistakes

Using margin instead of padding.

Not adding any spacing inside the box.

The p-6 class adds padding inside the box, creating space between the content and the border.

3fill in blank

hard

Fix the error in the code to properly show a red border around the box.

Tailwind

<div class="border-4 [1] p-4">
  Important content with red border.
</div>

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

Abg-red-500

Bborder-red-500

Ctext-red-500

Dborder-green-500

Attempts:

3 left

💡 Hint

Common Mistakes

Using background color class instead of border color.

Choosing the wrong color for the border.

The class border-red-500 sets the border color to red. Other options either change background or text color or use the wrong border color.

4fill in blank

hard

Fill both blanks to create a box with a shadow and rounded corners for clear visual boundaries.

Tailwind

<div class="[1] [2] p-5">
  Box with shadow and rounded corners.
</div>

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

Ashadow-lg

Bborder-2

Crounded-md

Dtext-center

Attempts:

3 left

💡 Hint

Common Mistakes

Using border class instead of shadow.

Not rounding corners for softer edges.

shadow-lg adds a large shadow around the box, and rounded-md rounds the corners, both helping to define the box visually.

5fill in blank

hard

Fill all three blanks to create a responsive card with border, padding, and shadow.

Tailwind

<div class="[1] [2] md:[3] rounded-lg">
  Responsive card with clear boundaries.
</div>

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

Aborder

Bp-4

Cshadow-xl

Dtext-gray-700

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting the responsive prefix for shadow.

Using text color instead of shadow for visual boundary.

border adds a border, p-4 adds padding inside the card, and md:shadow-xl adds a large shadow on medium screens and up, making the card visually distinct and responsive.