Modal and overlay patterns in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What is the visible result of this modal code?

Given this Tailwind CSS modal snippet, what will the user see when the modal is open?

Tailwind

<div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center">
  <div class="bg-white p-6 rounded shadow-lg max-w-sm w-full">
    <h2 class="text-xl font-bold mb-4">Modal Title</h2>
    <p class="mb-4">This is the modal content.</p>
    <button class="bg-blue-600 text-white px-4 py-2 rounded">Close</button>
  </div>
</div>

A A centered white box with a shadow on a semi-transparent black background covering the entire screen.

B A white box in the top-left corner with no background overlay.

C Only a black screen with no visible modal content.

D A white box centered but without any shadow or background overlay.

💡 Hint

Look at the classes controlling position and background colors.

The 'fixed inset-0' makes the overlay cover the entire screen. 'bg-black bg-opacity-50' creates a semi-transparent black background. 'flex items-center justify-center' centers the modal box. The modal box has white background, padding, rounded corners, and shadow.

❓ accessibility

intermediate

Which attribute improves accessibility for this modal?

You have a modal dialog. Which attribute should you add to the modal container to help screen readers identify it as a dialog?

Tailwind

<div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center" role="dialog" aria-modal="true">
  <div class="bg-white p-6 rounded shadow-lg max-w-sm w-full">
    <h2 class="text-xl font-bold mb-4">Modal Title</h2>
    <p class="mb-4">This is the modal content.</p>
    <button class="bg-blue-600 text-white px-4 py-2 rounded">Close</button>
  </div>
</div>

A tabindex="-1" aria-hidden="true"

B aria-describedby="close-button"

C aria-live="polite" role="alert"

D role="dialog" aria-modal="true"

💡 Hint

Think about how screen readers know this is a modal dialog.

Adding role="dialog" tells assistive tech this is a dialog. aria-modal="true" indicates the rest of the page is inert while modal is open, improving accessibility.

❓ selector

advanced

Which Tailwind selector targets the modal overlay only?

You want to style only the overlay background of a modal with Tailwind. The overlay has class 'fixed inset-0 bg-black bg-opacity-50'. Which selector targets only this overlay?

A .modal > div

B .bg-white.p-6.rounded.shadow-lg

C .fixed.inset-0.bg-black.bg-opacity-50

D .flex.items-center.justify-center

💡 Hint

Look for the classes that create the overlay background.

The overlay uses classes fixed, inset-0, bg-black, and bg-opacity-50. Selecting all these classes together targets only the overlay element.

❓ layout

advanced

How to center modal content vertically and horizontally?

Which Tailwind utility classes center the modal box both vertically and horizontally inside the overlay?

A grid place-items-center

B flex items-center justify-center

C block mx-auto my-auto

D absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2

💡 Hint

Think about flexbox centering utilities.

Using 'flex' on the container with 'items-center' (vertical) and 'justify-center' (horizontal) centers the modal content perfectly.

🧠 Conceptual

expert

Why use aria-modal="true" in modals?

What is the main reason to add aria-modal="true" to a modal dialog container?

A It tells assistive technologies that the rest of the page is inert and only the modal content should be accessed.

B It automatically traps keyboard focus inside the modal without extra scripting.

C It makes the modal content visible on all screen sizes.

D It disables scrolling on the page behind the modal.

💡 Hint

Think about how screen readers treat the rest of the page when a modal is open.

aria-modal="true" signals that the rest of the page is inactive, so screen readers focus only on the modal content, improving accessibility.