Alert and notification patterns in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a simple alert box with Tailwind CSS.

Tailwind

<div class="bg-[1]-100 border border-[1]-400 text-[1]-700 px-4 py-3 rounded relative" role="alert">
  <strong class="font-bold">Alert!</strong>
  <span class="block sm:inline">This is an alert message.</span>
</div>

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

Ared

Bgreen

Cblue

Dyellow

Attempts:

3 left

💡 Hint

Common Mistakes

Using a color that does not match the alert's purpose.

Forgetting to keep the color consistent across background, border, and text.

The alert box uses the red color scheme for background, border, and text to indicate an error or important alert.

2fill in blank

medium

Complete the code to add a close button to the alert with proper accessibility.

Tailwind

<button type="button" class="absolute top-0 bottom-0 right-0 px-4 py-3" aria-label="[1]">
  <svg class="fill-current h-6 w-6 text-gray-500" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
    <title>Close</title>
    <path d="M14.348 5.652a1 1 0 00-1.414-1.414L10 7.172 7.066 4.238a1 1 0 10-1.414 1.414L8.586 10l-2.934 2.934a1 1 0 101.414 1.414L10 12.828l2.934 2.934a1 1 0 001.414-1.414L11.414 10l2.934-2.934z"/>
  </svg>
</button>

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

AClose alert

BDismiss

CClose notification

DRemove alert

Attempts:

3 left

💡 Hint

Common Mistakes

Using vague labels like 'Dismiss' without context.

Not including an aria-label at all.

The aria-label should clearly describe the button's action for screen readers. "Close alert" is clear and descriptive.

3fill in blank

hard

Fix the error in the Tailwind alert code to make the alert background color correct.

Tailwind

<div class="bg-[1]-500 border border-[1]-700 text-white px-4 py-3 rounded relative" role="alert">
  <strong class="font-bold">Success!</strong>
  <span class="block sm:inline">Your operation completed successfully.</span>
</div>

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

Ared

Bblue

Cgreen

Dyellow

Attempts:

3 left

💡 Hint

Common Mistakes

Using red for success alerts, which is confusing.

Mismatching background and border colors.

Green is the correct color for success alerts. Using green-500 for background and green-700 for border fits the success message.

4fill in blank

hard

Fill both blanks to create a warning alert with an icon and proper color.

Tailwind

<div class="flex items-center bg-[1]-100 border-l-4 border-[2]-500 text-[2]-700 p-4" role="alert">
  <svg class="fill-current w-6 h-6 mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
    <path d="M10 15a1.5 1.5 0 110-3 1.5 1.5 0 010 3zm.25-9.75v4.5h-1.5v-4.5h1.5z"/>
  </svg>
  <p class="font-bold">Warning!</p>
</div>

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

Ayellow

Bred

Corange

Dblue

Attempts:

3 left

💡 Hint

Common Mistakes

Using red or orange which may confuse warning with error.

Mismatching colors between background and border.

Yellow is the standard color for warning alerts. Both background and border use yellow shades for consistency.

5fill in blank

hard

Fill all three blanks to create a responsive notification banner with Tailwind CSS.

Tailwind

<div class="fixed top-0 inset-x-0 bg-[1]-600 text-white p-4 flex justify-between items-center">
  <p class="text-sm font-medium">[2]</p>
  <button class="ml-4 text-white hover:text-[3]-200 focus:outline-none focus:ring-2 focus:ring-white rounded" aria-label="Close notification">
    &times;
  </button>
</div>

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

Ablue

BNew update available!

Dgreen

Attempts:

3 left

💡 Hint

Common Mistakes

Using mismatched colors for background and hover states.

Leaving the notification message blank or unclear.

The banner uses a blue background with white text. The message is "New update available!" and the close button changes to a lighter blue on hover for clarity.