Requires Material Tailwind JS

Tailwind CSS Dialog/Modal

Build elegant modal dialogs using Tailwind CSS for overlaid content and interactions. Perfect for creating accessible popups, forms, and alerts that enhance user experience without disrupting the main content flow.


Basic Dialog

Create clean and accessible modals using Tailwind CSS flexbox and backdrop utilities. This example shows how to build a dialog with header, content area, and action buttons.


Dialog Sizes

Scale your dialogs appropriately using Tailwind CSS sizing utilities. Choose from multiple sizes (xs, sm, md, lg, xl, screen) to fit your content needs while maintaining responsive behavior.


Dialog with Image

Build media-rich dialogs using Tailwind CSS grid and image utilities. Perfect for image galleries or detailed media displays with download and sharing options.


Web3 Dialog

Design cryptocurrency wallet connection dialogs using Tailwind CSS flex and hover utilities. Create beautiful interfaces for Web3 applications with clear wallet options and helpful guidance.


Long Dialog

Create scrollable content dialogs using Tailwind CSS overflow utilities. Perfect for terms of service, detailed information, or any content that exceeds the viewport height.


Dialog Notification

Build attention-grabbing notification dialogs using Tailwind CSS color utilities. Combine icons with bg-slate-800, bg-blue-500, bg-green-500, bg-red-500 backgrounds for different alert types.

Required Script

The dialog component requires a script for handling open/close states, keyboard navigation, and click-outside behavior. Add this script to your HTML file for proper functionality.

1<script src="https://unpkg.com/@material-tailwind/[email protected]/dist/material-tailwind.umd.min.js" defer></script>