Components

Alerts

Put useful feedback next to the task it explains, with a clear next step when something needs attention.

Usage & approach

Use role="status" for non-urgent updates inserted dynamically. Reserve role="alert" for errors that need immediate attention. Static guidance can use an ordinary section. Keep messages actionable and avoid exposing technical provider errors.

Specifications

Layout: rounded-md border p-4
Title: text-sm font-semibold
Description: mt-1 text-base leading-7
Feedback: Use text and semantics alongside color.

Success and validation feedback

A saved draft and an actionable correction message.

<div class="space-y-4">
  <div role="status" class="rounded-md border border-[#d0e3c8] bg-[#f1f2f0] p-4 text-[#183d2c] dark:border-[#3d4140] dark:bg-[#303232] dark:text-[#f4f5f2]"><h3 class="text-sm font-semibold">Draft saved</h3><p class="mt-1 text-base leading-7">You can return to this quotation before submitting it.</p></div>
  <div role="alert" class="rounded-md border border-red-200 bg-red-50 p-4 text-red-900 dark:border-red-900 dark:bg-red-950 dark:text-red-200"><h3 class="text-sm font-semibold">Check your travel dates</h3><p class="mt-1 text-base leading-7">The return date must be after the departure date.</p></div>
</div>

HTML + Tailwind CSS · fit to panel

Bring this into your project

Copy the HTML from the code panel. Keep complete utility names in files scanned by Tailwind, retain accessible labels and focus styles, and connect actions to your own application. Preview controls belong to this documentation and are not part of the copied example.