Requires Material Tailwind JS

Tailwind CSS Modal/Dialog

Get started with our modal components styled with Tailwind CSS. Perfect for creating overlays, popups, and dialogs that enhance user interaction with smooth transitions and accessible design.


Basic Modal

Looking for a simple modal? This example shows how to create clean overlays using Tailwind CSS flex and backdrop utilities, complete with header, content area, and action buttons.


Transform your modals with multiple size options using Tailwind CSS sizing utilities. Choose from xs, sm, md, lg, xl, and screen sizes that adapt perfectly to your content needs.


Need a sign-in popup? This example combines Tailwind CSS form utilities with modal functionality. Features email and password fields, remember me option, and clear call-to-action buttons.


Use this example to create media-rich modals using Tailwind CSS grid and aspect utilities. Perfect for image galleries or user profiles with download and sharing capabilities.


Web 3 Modal

Check out this wallet connection modal built with Tailwind CSS flex utilities. Showcases popular wallet options with clear visual hierarchy and helpful guidance for Web3 users.


Long Modal

Design scrollable content modals using Tailwind CSS overflow utilities. Ideal for terms of service, detailed information, or any content that exceeds the viewport height.


Message Modal

Transform your messaging interface with this sleek modal design. Built using Tailwind CSS form utilities for a clean message composition experience.


Create attention-grabbing alerts using Tailwind CSS color utilities. Choose from bg-slate-800, bg-blue-500, bg-green-500, bg-red-500, or bg-amber-500 to match your notification type.


Required Script

The modal component needs a script for handling open/close states and keyboard interactions. Add this script to the bottom of your HTML file for proper functionality.

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