Background color utilities in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the background color to blue using Tailwind CSS.

Tailwind

<div class="bg-[1]-500 p-4 text-white">Blue background</div>

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

Ablue

Bred

Cgreen

Dyellow

Attempts:

3 left

💡 Hint

Common Mistakes

Using a color name that does not match the desired background color.

Forgetting the shade number like 500.

The class bg-blue-500 sets the background color to a medium blue shade in Tailwind CSS.

2fill in blank

medium

Complete the code to set a light gray background using Tailwind CSS.

Tailwind

<section class="bg-[1]-200 p-6">Light gray background</section>

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

Ablue

Bred

Cgray

Dgreen

Attempts:

3 left

💡 Hint

Common Mistakes

Using a darker shade like 500 instead of 200 for a light background.

Choosing a different color name than gray.

The class bg-gray-200 applies a light gray background color in Tailwind CSS.

3fill in blank

hard

Fix the error in the code to correctly apply a red background with Tailwind CSS.

Tailwind

<div class="bg-[1]-600 p-5 text-white">Red background</div>

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

Agreen

Bred

Cblue

Dyellow

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different color name like blue or green by mistake.

Forgetting the shade number or using an invalid one.

The class bg-red-600 correctly applies a strong red background color.

4fill in blank

hard

Fill both blanks to create a green background with padding and white text using Tailwind CSS.

Tailwind

<div class="bg-[1]-400 p-[2] text-white">Green background</div>

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

Agreen

Bblue

C6

D4

Attempts:

3 left

💡 Hint

Common Mistakes

Using a wrong color name like blue for the background.

Choosing a padding size that is too small or too large for the example.

The class bg-green-400 sets a medium green background. The class p-6 adds padding of 1.5rem all around.

5fill in blank

hard

Fill all three blanks to create a yellow background with medium padding and black text using Tailwind CSS.

Tailwind

<section class="bg-[1]-300 p-[2] text-[3]">Yellow background</section>

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

Ared

B4

Cblack

Dyellow

Attempts:

3 left

💡 Hint

Common Mistakes

Using red instead of yellow for the background color.

Choosing padding that is too small or too large.

Using text color that does not contrast well, like white on yellow.

The class bg-yellow-300 sets a soft yellow background. p-4 adds medium padding. text-black sets the text color to black for good contrast.