Tailwind CSS Modal Component: Free Examples & Code 2026
Modals are powerful UI patterns that demand a user's full attention. A well-designed Tailwind CSS modal component is accessible, responsive, and visually distinct from the background content. In this guide, we cover every modal type, the key Tailwind classes for overlay design, and provide free copy-paste code for HTML and JSX.
6 Types of Tailwind CSS Modal Components
Centered Dialog
Best for: Standard alerts, small formsThe most common modal pattern. Appears in the center of the screen with a darkened backdrop. Ideal for focus-heavy tasks.
fixed inset-0 flex items-center justify-centerSlide-Over / Side Panel
Best for: Filters, navigation, settingsSlides in from the right or left edge of the screen. Provides a vertical container that doesn't completely block the main UI.
fixed inset-y-0 right-0 w-full max-w-mdFull-Screen Modal
Best for: Mobile apps, complex editorsTakes up the entire viewport. Often used on mobile devices where small dialogs are difficult to interact with.
fixed inset-0 h-full w-full bg-whiteConfirmation Alert
Best for: Destructive actions (Delete)A small modal designed to confirm a user action. Often features a red primary button for destructive operations.
max-w-sm p-6 text-centerModal with Backdrop Blur
Best for: Modern, high-end UIsUses the backdrop-blur utility to create a frosted glass effect on the content behind the modal.
bg-gray-500/75 backdrop-blur-smPersistent Modal
Best for: Mandatory choicesRequires a specific action to close. Clicking the backdrop does not dismiss the modal. Used for critical system notifications.
pointer-events-none (on backdrop)Essential Tailwind CSS Classes for Modals
Use these utility classes to build high-quality overlays:
fixed inset-0Ensures the modal backdrop covers the entire viewportz-50Standard high z-index to ensure the modal stays on top of all other UIbg-black/50Standard semi-transparent dark backdropbackdrop-blurAdds a frosted glass effect to the backdropsm:max-w-lgResponsive width constraint for desktoptransform transition-allEnables smooth opening/closing animationsscale-95 opacity-0Starting state for an entry animationscale-100 opacity-100End state for an entry animationrounded-2xlModern soft corner radius for modal containersshadow-2xlDeep shadow to provide maximum elevationAnatomy of an Accessible Tailwind CSS Modal
Backdrop Overlay
fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacityThe layer that sits behind the modal. dims the background content and blocks interactions.
Modal Container
relative bg-white rounded-lg px-4 pt-5 pb-4 shadow-xl sm:my-8 sm:w-full sm:max-w-lg sm:p-6The main white box containing your content. Use relative to position the close button inside.
Close Button
absolute top-4 right-4 text-gray-400 hover:text-gray-500Essential for manual dismissal. Must have a clear aria-label='Close'.
Title & Body
text-lg font-medium text-gray-900 / text-sm text-gray-500Clear heading and supporting text. The title should be linked via aria-labelledby.
Action Bar (Footer)
mt-5 sm:mt-6 sm:grid sm:grid-flow-row-dense sm:grid-cols-2 sm:gap-3Buttons for confirmation or cancellation. Typically aligned to the bottom-right on desktop.
Adding Smooth Transitions to Tailwind Modals
A modal that suddenly pops into existence can be jarring. Use Tailwind's transition utilities for a polished entry:
{/* Transition classes for Modal entry */}
<div className="fixed inset-0 z-50 overflow-y-auto">
<div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
{/* Backdrop fade */}
<div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity duration-300 ease-out opacity-100"></div>
{/* Modal scale/fade */}
<div className="relative transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all duration-300 ease-out opacity-100 scale-100 sm:my-8 sm:w-full sm:max-w-lg sm:p-6">
{/* Content here */}
</div>
</div>
</div>Modal Accessibility Checklist
- ✓The modal container must have role='dialog' and aria-modal='true'.
- ✓Link the modal title to the container using aria-labelledby='modal-title-id'.
- ✓Implement 'Focus Trapping' — when the modal is open, Tab should only move focus between elements inside the modal.
- ✓The 'Escape' key must dismiss the modal.
- ✓When the modal closes, focus must return to the element that triggered it (e.g., the 'Open' button).
- ✓Clicking the backdrop should optionally dismiss the modal, unless it is a persistent dialog.
- ✓Prevent the background body from scrolling (overflow-hidden on <body>) while the modal is open.
Frequently Asked Questions
How do I make a Tailwind CSS modal responsive?
Most modals should be full-width on mobile (w-full) and constrained on desktop (sm:max-w-lg). Use 'items-end' for mobile to create a bottom-sheet effect and 'sm:items-center' for desktop centering.
Should I use a library like Headless UI for modals?
For React or Vue apps, yes. Headless UI (built by the Tailwind team) handles all the complex accessibility requirements (focus trapping, keyboard nav) while letting you style the modal with pure Tailwind classes.
How do I prevent the page behind the modal from scrolling?
In React, you can use a useEffect to add 'overflow-hidden' to the document.body when the modal is mounted and remove it on unmount. Libraries like Headless UI handle this automatically.
Can I have multiple modals open at once?
Technically yes, but it is a poor UX pattern. If you must, ensure each modal has a distinct z-index and that focus management handles the stack correctly.
Browse Free Tailwind CSS Modal Components
Copy-paste modal code in HTML and JSX — all variants, no account needed.