Active variant in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to apply a red background when the button is active.

Tailwind

<button class="bg-blue-500 [1]:bg-red-500 text-white px-4 py-2 rounded">Click me</button>

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

Aactive

Bdisabled

Cfocus

Dhover

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'hover' instead of 'active' will change color only when hovering, not pressing.

Using 'focus' changes color when the button is focused, not pressed.

The active variant applies styles when the button is being clicked or pressed.

2fill in blank

medium

Complete the code to make the text bold only when the link is active (clicked).

Tailwind

<a href="#" class="text-gray-700 [1]:font-bold">Link</a>

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

Aactive

Bhover

Cfocus

Dvisited

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'visited' applies styles after the link is clicked and visited, not during the click.

Using 'hover' applies styles when the mouse is over the link, not when clicking.

The active variant applies styles while the link is being clicked.

3fill in blank

hard

Fix the error in the code to apply a green border when the input is active (clicked or focused).

Tailwind

<input type="text" class="border-2 border-gray-300 [1]:border-green-500" />

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

Aactive

Bhover

Cchecked

Dfocus

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'active' on inputs does not reliably apply styles when focused.

Using 'checked' applies only to checkboxes or radios, not text inputs.

The focus variant applies styles when the input is focused (clicked or tabbed into). The active variant does not apply to inputs in the same way.

4fill in blank

hard

Fill both blanks to apply a blue background on hover and a red background when active.

Tailwind

<button class="[1]:bg-blue-500 [2]:bg-red-500 text-white px-4 py-2 rounded">Press me</button>

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

Ahover

Bactive

Cfocus

Ddisabled

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping the variants will cause the colors to appear at wrong times.

Using 'focus' instead of 'active' changes color on keyboard focus, not press.

hover applies styles when the mouse is over the button, and active applies styles when the button is pressed.

5fill in blank

hard

Fill all three blanks to apply uppercase text on hover, bold text when active, and underline on focus.

Tailwind

<a href="#" class="[1]:uppercase [2]:font-bold [3]:underline">Link</a>

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

Ahover

Bactive

Cfocus

Dvisited

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up 'visited' with 'focus' or 'active' causes styles to appear at wrong times.

Using 'active' for underline instead of 'focus' changes style only while clicking.

hover applies uppercase on mouse over, active applies bold while clicking, and focus applies underline when the link is focused.