Focus variant in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to apply a blue border when the input is focused.

Tailwind

<input type="text" class="border [1]" aria-label="Name input">

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

Ahover:border-blue-500

Bfocus:border-blue-500

Cactive:border-blue-500

Dvisited:border-blue-500

Attempts:

3 left

💡 Hint

Common Mistakes

Using hover: instead of focus: which styles on mouse hover, not keyboard focus.

Using active: which styles only while clicking, not on keyboard focus.

The focus: variant applies styles when the element is focused, such as when clicked or tabbed into.

2fill in blank

medium

Complete the code to change the background color to yellow when a button is focused.

Tailwind

<button class="p-2 [1] bg-gray-200" aria-label="Submit button">Submit</button>

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

Avisited:bg-yellow-300

Bhover:bg-yellow-300

Cactive:bg-yellow-300

Dfocus:bg-yellow-300

Attempts:

3 left

💡 Hint

Common Mistakes

Using hover: which only works on mouse hover.

Using active: which applies only while clicking.

The focus:bg-yellow-300 class changes the background color when the button is focused, helping keyboard users see the active element.

3fill in blank

hard

Fix the error in the code to apply a red text color on focus for the link.

Tailwind

<a href="#" class="text-blue-600 [1]">Link</a>

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

Afocus:text-red-600

Bhover:text-red-600

Cactive:text-red-600

Dvisited:text-red-600

Attempts:

3 left

💡 Hint

Common Mistakes

Using hover: which styles on mouse hover, not focus.

Using active: which styles only while clicking.

The focus:text-red-600 class applies red text color only when the link is focused, improving accessibility.

4fill in blank

hard

Fill both blanks to style the input with a green border and shadow on focus.

Tailwind

<input type="text" class="border border-gray-300 [1] [2] rounded" aria-label="Email input">

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

Afocus:border-green-500

Bhover:border-green-500

Cfocus:shadow-lg

Dactive:shadow-lg

Attempts:

3 left

💡 Hint

Common Mistakes

Using hover: or active: variants instead of focus:.

Forgetting to add shadow on focus.

focus:border-green-500 changes the border color on focus, and focus:shadow-lg adds a shadow on focus for better visibility.

5fill in blank

hard

Fill all three blanks to style the button with a blue background, white text, and shadow on focus.

Tailwind

<button class="px-4 py-2 rounded [1] [2] [3]" aria-label="Save button">Save</button>

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

Afocus:bg-blue-600

Bfocus:text-white

Cfocus:shadow-md

Dhover:bg-blue-600

Attempts:

3 left

💡 Hint

Common Mistakes

Using hover: instead of focus: variants.

Missing one of the style changes on focus.

The classes focus:bg-blue-600, focus:text-white, and focus:shadow-md style the button's background, text color, and shadow when focused, improving keyboard navigation visibility.