Ring and outline colors in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

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

Tailwind

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

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

Aring-red-500

Bring-green-500

Cring-blue-500

Dring-yellow-500

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing a ring color that is not blue.

Forgetting to use the focus prefix.

The class ring-blue-500 adds a blue colored ring around the button on focus.

2fill in blank

medium

Complete the code to add a red outline to the input field when it is focused.

Tailwind

<input type="text" class="focus:[1] outline-2">

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

Aoutline-green-500

Boutline-red-500

Coutline-yellow-500

Doutline-blue-500

Attempts:

3 left

💡 Hint

Common Mistakes

Using ring classes instead of outline classes.

Choosing the wrong color.

The class outline-red-500 adds a red outline on focus to the input field.

3fill in blank

hard

Fix the error in the code to correctly add a green ring on focus.

Tailwind

<div class="focus:ring-[1] ring-2">Content</div>

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

Agreen-500

Bred-500

Cblue-500

Dyellow-500

Attempts:

3 left

💡 Hint

Common Mistakes

Using a color that does not match the intended green ring.

Leaving the color blank or incomplete.

The correct ring color for green is green-500. This adds a green ring on focus.

4fill in blank

hard

Fill both blanks to add a yellow outline and a 4-pixel ring on focus.

Tailwind

<button class="focus:outline-[1] focus:ring-[2] ring-blue-300">Press</button>

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

Ayellow-400

B2

C4

Dred-400

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up ring size numbers.

Using wrong color names for outline.

The class focus:outline-yellow-400 adds a yellow outline on focus, and focus:ring-4 adds a 4-pixel ring.

5fill in blank

hard

Fill all three blanks to create a green ring, red outline, and ring thickness of 8 on focus.

Tailwind

<input class="focus:ring-[1] focus:outline-[2] focus:ring-[3]">

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

Agreen-600

Bred-500

C8

D4

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing ring thickness with color values.

Using incorrect color shades.

focus:ring-green-600 adds a green ring, focus:outline-red-500 adds a red outline, and focus:ring-8 sets the ring thickness to 8 pixels.