Why backgrounds enhance design in Tailwind - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a light gray background to the section.

Tailwind

<section class="bg-[1]-200 p-6 rounded">
  <h2 class="text-lg font-semibold">Welcome</h2>
  <p>This section has a soft background color.</p>
</section>

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

Ablue

Bgray

Cred

Dgreen

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing a very bright color that distracts from content.

Forgetting the shade number after the color.

The class bg-gray-200 adds a light gray background, which is subtle and easy on the eyes.

2fill in blank

medium

Complete the code to add a background image that covers the entire div.

Tailwind

<div class="h-48 bg-[1] bg-center bg-cover rounded-lg">
  <p class="text-white p-4">Background image example</p>
</div>

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

Afixed

Blocal

C[url('/images/bg.jpg')]

Drepeat

Attempts:

3 left

💡 Hint

Common Mistakes

Using bg-fixed instead of setting the image URL.

Not including the image URL in the class.

The class bg-[url('/images/bg.jpg')] sets the background image. Combined with bg-cover, it fills the div nicely.

3fill in blank

hard

Fix the error in the code to apply a semi-transparent black overlay on the background.

Tailwind

<div class="relative bg-blue-500 h-64 rounded">
  <div class="absolute inset-0 bg-black [1]-50"></div>
  <div class="relative p-6 text-white">
    <h3>Overlay Example</h3>
  </div>
</div>

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

Afilter

Btransparent

Copacity

Dbg-opacity

Attempts:

3 left

💡 Hint

Common Mistakes

Using opacity-50 which affects the whole div including children.

Using filter instead of opacity classes.

The class bg-opacity-50 sets the background color transparency to 50%, creating a semi-transparent overlay.

4fill in blank

hard

Fill both blanks to create a responsive background color that changes on medium screens.

Tailwind

<div class="bg-[1]-300 md:bg-[2]-600 p-4 rounded">
  <p>Responsive background color</p>
</div>

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

Ayellow

Bpurple

Cgreen

Dpink

Attempts:

3 left

💡 Hint

Common Mistakes

Using the same color for both blanks, so no visible change.

Forgetting the md: prefix for responsive styles.

The background is yellow on small screens and changes to a darker green on medium screens and larger.

5fill in blank

hard

Fill all three blanks to create a gradient background from blue to green with padding.

Tailwind

<section class="bg-gradient-to-[1] from-[2]-400 to-[3]-500 p-8 rounded-lg">
  <h1 class="text-white text-2xl">Gradient Background</h1>
</section>

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

Ar

Bblue

Cgreen

Dl

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong direction letter causing gradient to go the opposite way.

Mixing up color names.

The gradient goes from left (l) to right, starting with blue (blue) and ending with green (green).