Modal and overlay patterns in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a fixed overlay background behind the modal.

Tailwind

<div class="fixed inset-0 bg-black bg-opacity-[1]"></div>

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

A25

B75

C50

D100

Attempts:

3 left

💡 Hint

Common Mistakes

Using 100 makes the overlay fully black and hides the background.

Using 0 makes the overlay invisible.

The bg-opacity-25 class sets the overlay transparency to 25%, making the background dim but still visible.

2fill in blank

medium

Complete the code to center the modal box horizontally and vertically using Flexbox.

Tailwind

<div class="fixed inset-0 [1] items-center justify-center">
  <!-- Modal content -->
</div>

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

Aitems-center

Bjustify-center

Cflex-col

Dflex

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting to add flex means alignment classes have no effect.

Using only items-center or justify-center without flex.

The flex class activates Flexbox layout, which is needed for items-center and justify-center to work and center the modal.

3fill in blank

hard

Fix the error in the modal close button to make it accessible by keyboard.

Tailwind

<button type="button" class="absolute top-4 right-4 p-2 focus:[1]" aria-label="Close modal">
  &times;
</button>

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

Aring

Bnone

Cshadow

Dhidden

Attempts:

3 left

💡 Hint

Common Mistakes

Using focus:outline-none removes focus indication, hurting accessibility.

Using focus:outline-hidden is not a valid Tailwind class.

The focus:ring class adds a visible ring around the button when focused, helping keyboard users see the focus.

4fill in blank

hard

Fill both blanks to create a modal container with white background and rounded corners.

Tailwind

<div class="bg-[1] [2] p-6 max-w-md w-full">
  <!-- Modal content -->
</div>

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

Awhite

Brounded-lg

Cgray-100

Drounded-full

Attempts:

3 left

💡 Hint

Common Mistakes

Using bg-gray-100 makes the background off-white.

Using rounded-full makes the modal fully rounded like a pill shape.

bg-white sets a clean white background, and rounded-lg gives the modal softly rounded corners for a friendly look.

5fill in blank

hard

Fill all three blanks to create a modal with shadow, padding, and max width.

Tailwind

<div class="shadow-[1] p-[2] max-w-[3] w-full">
  <!-- Modal content -->
</div>

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

Alg

B6

Cmd

Dxl

Attempts:

3 left

💡 Hint

Common Mistakes

Using shadow-sm or no shadow makes the modal flat.

Using too small padding makes content cramped.

Using max-w-xl makes the modal too wide on small screens.

shadow-lg adds a large shadow for depth, p-6 adds comfortable padding, and max-w-md limits the modal width for readability.