Components
Dialogs
A focused confirmation surface with one clear decision and a visible way back.
Usage & approach
This is a static dialog appearance, not a modal implementation. In a real application use native dialog.showModal() or an accessible modal controller, move focus inside, contain keyboard focus, support Escape, and return focus to the trigger. Add aria-labelledby and aria-describedby to the real dialog.
Specifications
- Overlay
- bg-black/40 p-4
- Panel
- w-full max-w-md rounded-lg bg-white p-6
- Actions
- flex flex-col-reverse gap-3 sm:flex-row sm:justify-end
- Scope
- Static appearance only; focus management belongs to the host application.
Confirmation layout
An inline mockup of the overlay and panel. It does not block the documentation.
<div class="flex min-h-80 items-center justify-center rounded-lg bg-black/40 p-4">
<section aria-label="Confirmation appearance reference" class="w-full max-w-md rounded-lg bg-white p-6 text-[#183d2c] dark:bg-[#262828] dark:text-[#f4f5f2]">
<h3 class="text-xl font-semibold">Submit this quotation?</h3>
<p class="mt-3 text-base leading-7 text-[#333] dark:text-[#c4c7c5]">Review the details before continuing. This is a visual reference and will not submit a quotation.</p>
<div class="mt-6 flex flex-col-reverse gap-3 sm:flex-row sm:justify-end"><button type="button" class="min-h-11 rounded-md border border-[#c7d4c9] px-5 text-sm font-semibold focus-visible:outline-2">Go back</button><button type="button" class="inline-flex min-h-11 items-center justify-center rounded-md bg-[#006838] px-5 py-2.5 text-sm font-semibold text-white hover:bg-[#00552e] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#006838] dark:bg-[#006838] dark:text-white dark:hover:bg-[#00552e] dark:focus-visible:outline-[#006838] disabled:cursor-not-allowed disabled:opacity-50">Confirm</button></div>
</section>
</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.