Why interactive states need styling in Tailwind - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a hover effect that changes the button background color.

Tailwind

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

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

Afocus

Bhover

Cactive

Dvisited

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'focus' instead of 'hover' for mouse hover effect.

Using 'active' which applies only when clicking, not hovering.

The hover state applies styles when the mouse pointer is over the button, making it interactive and clear to users.

2fill in blank

medium

Complete the code to add a focus ring around the input field for accessibility.

Tailwind

<input type="text" class="border rounded py-2 px-3 [1]:ring-2 [1]:ring-blue-500" aria-label="Name input">

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

Afocus

Bhover

Cactive

Dvisited

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'hover' instead of 'focus' for keyboard accessibility.

Not adding any focus styles, making keyboard navigation hard.

The focus state is important for keyboard users to see which element is active. Tailwind uses focus: prefix to style this state.

3fill in blank

hard

Fix the error in the button code to apply the active state background color correctly.

Tailwind

<button class="bg-green-500 text-white py-2 px-4 rounded [1]:bg-green-700">Submit</button>

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

Ahover

Bvisited

Cfocus

Dactive

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'hover' which applies on mouse over, not click.

Using 'focus' which applies on keyboard focus, not click.

The active state applies styles when the button is being clicked. Tailwind uses active: prefix for this.

4fill in blank

hard

Fill both blanks to style a link with underline on hover and change text color on focus.

Tailwind

<a href="#" class="text-blue-600 [1]:underline [2]:text-blue-800">Learn more</a>

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

Ahover

Bfocus

Cactive

Dvisited

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up hover and focus states.

Not adding focus styles, hurting accessibility.

Hover adds underline when mouse is over the link. Focus changes text color when keyboard users select the link.

5fill in blank

hard

Fill all three blanks to style a button with shadow on hover, scale on active, and outline on focus.

Tailwind

<button class="bg-purple-600 text-white py-2 px-5 rounded transition [1]:shadow-lg [2]:scale-95 [3]:outline-none [3]:ring-4 [3]:ring-purple-300">Press me</button>

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

Ahover

Bactive

Cfocus

Dvisited

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing active and hover states.

Forgetting focus styles, making keyboard navigation hard.

Using visited state which doesn't apply to buttons.

Hover adds a shadow for a lifted look. Active scales the button smaller when pressed. Focus adds a visible ring outline for keyboard users.