Ring utilities for focus states in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a blue ring around the button when it is focused.

Tailwind

<button class="focus:ring-4 focus:ring-[1]-500 focus:outline-none">Click me</button>

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

Agreen

Bblue

Cred

Dyellow

Attempts:

3 left

💡 Hint

Common Mistakes

Using a color that is not a valid Tailwind color.

Forgetting to add focus: prefix.

The focus:ring-4 focus:ring-blue-500 utilities add a blue ring of width 4 when the button is focused. focus:outline-none removes the default outline.

2fill in blank

medium

Complete the code to remove the default outline and add a green ring on focus.

Tailwind

<input type="text" class="focus:ring-2 focus:ring-[1]-500 focus:outline-none" placeholder="Enter text">

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

Agreen

Bred

Cblue

Dpurple

Attempts:

3 left

💡 Hint

Common Mistakes

Not removing the default outline, so both outline and ring appear.

Using a ring width other than 2.

The class focus:outline-none removes the default outline. focus:ring-2 focus:ring-green-500 adds a green ring of width 2 on focus.

3fill in blank

hard

Fix the error in the code to correctly apply a red ring on focus with width 3.

Tailwind

<textarea class="focus:ring-[1] focus:ring-red-500 focus:outline-none"></textarea>

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

A3

B4

C2

D5

Attempts:

3 left

💡 Hint

Common Mistakes

Using the color number as ring width.

Mixing ring width and color classes incorrectly.

The correct ring width is 3. Use focus:ring-3 focus:ring-red-500 to set a red ring of width 3 on focus. focus:outline-none removes the default outline.

4fill in blank

hard

Fill both blanks to create a button with a yellow ring of width 6 on focus and no default outline.

Tailwind

<button class="focus:ring-[2] focus:ring-[1]-500 focus:outline-none">Submit</button>

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

Ayellow

Bblue

C6

D4

Attempts:

3 left

💡 Hint

Common Mistakes

Using a ring width that is too small or not supported.

Forgetting to remove the default outline.

Using focus:ring-6 focus:ring-yellow-500 adds a yellow ring with width 6 on focus. The focus:outline-none removes the default outline.

5fill in blank

hard

Fill all three blanks to create an input with a purple ring of width 4 on focus, no outline, and a smooth transition.

Tailwind

<input type="text" class="focus:ring-[2] focus:ring-[1]-500 focus:outline-[3] transition duration-300" placeholder="Name">

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

Apurple

B4

Cnone

Dblue

Attempts:

3 left

💡 Hint

Common Mistakes

Using an incorrect ring width number.

Not removing the outline properly.

Forgetting the transition classes.

The classes focus:ring-4 focus:ring-purple-500 add a purple ring with width 4 on focus. focus:outline-none removes the default outline. The transition duration-300 adds a smooth 300ms transition effect.