Alert and notification patterns in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

Rendering a success alert with Tailwind CSS

Which option correctly renders a green success alert with accessible roles and proper padding using Tailwind CSS?

A <div class="bg-green-500 text-white p-2 rounded">Success! Your action was completed.</div>

B <div role="alert" class="bg-green-200 text-green-900 p-1 rounded">Success! Your action was completed.</div>

C <div role="alert" class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative" aria-live="polite">Success! Your action was completed.</div>

D <div role="alert" class="bg-green-100 border-green-400 text-green-700 px-4 py-3 rounded">Success! Your action was completed.</div>

💡 Hint

Look for the option that uses role="alert" and includes padding and border classes for a clear alert box.

Option C uses role="alert" for screen readers, includes padding (px-4 py-3), border with color, background, and text colors for a clear success alert. It also uses aria-live="polite" for accessibility. Other options miss some accessibility or styling details.

❓ selector

intermediate

Selecting the correct Tailwind class for a dismissible alert close button

Which Tailwind CSS class combination is best for a close button inside an alert to ensure it is keyboard accessible and visually clear?

A focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 text-red-700 hover:text-red-900

B hover:bg-red-700 text-white p-1 rounded cursor-pointer

C text-red-500 cursor-pointer

D focus:ring-4 focus:ring-red-300 rounded-full p-2 text-red-600

💡 Hint

Focus styles help keyboard users see the button is focused.

Option A includes focus outlines and ring styles for keyboard accessibility, plus hover color changes for clarity. Others miss focus styles or have insufficient padding.

🧠 Conceptual

advanced

Understanding ARIA roles in alert notifications

What is the main purpose of adding role="alert" to an alert notification in HTML?

A It styles the alert with a red background automatically.

B It hides the alert from screen readers to avoid distraction.

C It delays the alert announcement until the user focuses on it.

D It makes the alert content immediately announced by screen readers without user interaction.

💡 Hint

Think about how screen readers handle urgent messages.

role="alert" tells screen readers to announce the content immediately as a live region. It does not affect styling or delay announcements.

❓ layout

advanced

Creating a responsive notification banner with Tailwind CSS

Which option correctly uses Tailwind CSS to create a notification banner that is horizontally centered, has space between icon and text, and stacks vertically on small screens?

A <div class="flex flex-col sm:flex-row items-center justify-center gap-4 bg-blue-100 p-4 rounded"> <svg class="w-6 h-6 text-blue-600"></svg> <p class="text-blue-800">This is a notification banner.</p> </div>

B <div class="flex items-center justify-center gap-4 bg-blue-100 p-4 rounded"> <svg class="w-6 h-6 text-blue-600"></svg> <p class="text-blue-800">This is a notification banner.</p> </div>

C <div class="flex flex-row items-center justify-center gap-4 bg-blue-100 p-4 rounded"> <svg class="w-6 h-6 text-blue-600"></svg> <p class="text-blue-800">This is a notification banner.</p> </div>

D <div class="block sm:flex items-center justify-center gap-4 bg-blue-100 p-4 rounded"> <svg class="w-6 h-6 text-blue-600"></svg> <p class="text-blue-800">This is a notification banner.</p> </div>

💡 Hint

Use flex direction column by default (small screens) and row on larger screens (sm:).

Option A uses flex-col by default (vertical stack on small screens) and switches to flex-row on larger screens (sm:flex-row). It centers items and adds gap for spacing. Others miss the responsive stacking or use fixed directions.

❓ accessibility

expert

Ensuring accessible live region updates for dynamic alerts

You have a notification area that updates dynamically with new alerts. Which ARIA attribute combination ensures screen readers announce new alerts only when they appear, without repeating old alerts?

A aria-live="off" aria-atomic="true"

B aria-live="polite" aria-atomic="true"

C aria-live="polite" aria-atomic="false"

D aria-live="assertive" aria-atomic="false"

💡 Hint

Consider polite announcements and whole region updates.

aria-live="polite" lets screen readers announce updates without interrupting. aria-atomic="true" ensures the entire alert content is read, preventing partial repeats. Other options either interrupt too aggressively, don't announce, or may cause partial announcements.

Practice

1. What is the main purpose of an alert in a web page using Tailwind CSS?

easy

A. To decorate the page with colorful boxes

B. To quickly inform users about important messages or statuses

C. To create navigation menus

D. To add animations to images

Solution

1. Step 1: Understand the role of alerts

   Alerts are designed to catch user attention for important information like success, errors, or warnings.

2. Step 2: Differentiate alerts from other UI elements

   Alerts are not for decoration or navigation but for communication of status or messages.

3. Final Answer:

   To quickly inform users about important messages or statuses -> Option B

4. Quick Check:

   Alerts = Important user messages [OK]

Hint: Alerts are for important messages, not decoration [OK]

Common Mistakes:

• Thinking alerts are just decorative boxes
• Confusing alerts with navigation or layout elements
• Ignoring the purpose of user communication

2. Which Tailwind CSS class combination correctly styles a success alert with green background and white text?

easy

A. bg-green-500 text-white p-4 rounded

B. bg-red-500 text-black p-2 rounded

C. bg-yellow-300 text-gray-700 p-6 rounded

D. bg-blue-600 text-white p-1 rounded

Solution

1. Step 1: Identify success alert colors

   Success alerts typically use green backgrounds with white text for contrast.

2. Step 2: Match Tailwind classes

   bg-green-500 sets green background, text-white sets white text, p-4 adds padding, and rounded rounds corners.

3. Final Answer:

   <code>bg-green-500 text-white p-4 rounded</code> -> Option A

4. Quick Check:

   Green background + white text = success alert [OK]

Hint: Green background with white text means success alert [OK]

Common Mistakes:

• Using red or yellow for success alerts
• Forgetting padding or rounded corners
• Mixing text colors that reduce readability

3. What will be the visual result of this Tailwind alert code?

<div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative" role="alert">
  <strong class="font-bold">Error!</strong>
  <span class="block sm:inline"> Something went wrong.</span>
</div>

medium

A. A yellow alert box with bold 'Warning!' and message 'Check your input.'

B. A green alert box with bold 'Success!' and message 'Operation completed.'

C. A blue alert box with italic 'Info' and message 'Please read carefully.'

D. A red alert box with bold 'Error!' and message 'Something went wrong.'

Solution

1. Step 1: Analyze the color classes

   bg-red-100, border-red-400, and text-red-700 create a red-themed alert indicating an error or danger.

2. Step 2: Read the content inside the alert

   The text includes a bold 'Error!' and a message 'Something went wrong.', matching the red error style.

3. Final Answer:

   A red alert box with bold 'Error!' and message 'Something went wrong.' -> Option D

4. Quick Check:

   Red colors + 'Error!' text = error alert [OK]

Hint: Red background and 'Error!' text means error alert [OK]

Common Mistakes:

• Confusing red alert with success or info
• Ignoring the role attribute for accessibility
• Misreading the text content inside the alert

4. Identify the error in this Tailwind alert code snippet:

<div class="bg-yellow-200 text-yellow-800 p-3 rounded">
  <strong>Warning!</strong> Please check your input.
</div>

medium

A. Missing role="alert" attribute for accessibility

B. Wrong color classes for a warning alert

C. Padding class p-3 is invalid in Tailwind

D. The <strong> tag should not be used inside alerts

Solution

1. Step 1: Check accessibility attributes

   Alerts should have role="alert" to notify assistive technologies about important messages.

2. Step 2: Verify color and padding classes

   bg-yellow-200 and text-yellow-800 are correct for warning alerts; p-3 is a valid padding class.

3. Final Answer:

   Missing role="alert" attribute for accessibility -> Option A

4. Quick Check:

   Accessibility needs role="alert" [OK]

Hint: Always add role="alert" for alert accessibility [OK]

Common Mistakes:

• Forgetting role attribute for screen readers
• Thinking padding classes are invalid
• Misunderstanding semantic tags usage

5. You want to create a dismissible info alert using Tailwind CSS that is accessible and responsive. Which combination of features should you include?

hard

A. Add role="dialog" and hide the alert on small screens

B. Use only bg-blue-500 and text-white classes without accessibility roles

C. Use role="alert", aria-live="polite", a close button with keyboard support, and responsive padding classes

D. Use aria-hidden="true" to hide the alert from screen readers

Solution

1. Step 1: Ensure accessibility with roles and live regions

   Use role="alert" and aria-live="polite" so screen readers announce the alert politely.

2. Step 2: Add a close button with keyboard support

   Make the alert dismissible by adding a button accessible via keyboard (e.g., tabindex and aria-label).

3. Step 3: Use responsive padding classes

   Apply padding classes like p-4 sm:p-6 to ensure good spacing on all screen sizes.

4. Final Answer:

   Use role="alert", aria-live="polite", a close button with keyboard support, and responsive padding classes -> Option C

5. Quick Check:

   Accessibility + dismissible + responsive = Use role="alert", aria-live="polite", a close button with keyboard support, and responsive padding classes [OK]

Hint: Combine accessibility roles, keyboard support, and responsive design [OK]

Common Mistakes:

• Ignoring accessibility roles
• Not providing keyboard support for dismiss button
• Hiding alerts from screen readers incorrectly