Source: https://tailwindcss.com/plus/ui-blocks/application-ui/overlays/modal-dialogs

• • Marketing

  • Application UI

  • Ecommerce

  • Documentation

• Application Shells

  • Stacked Layouts

  • Sidebar Layouts

  • Multi-Column Layouts

• Headings

  • Page Headings

  • Card Headings

  • Section Headings

• Data Display

  • Description Lists

  • Stats

  • Calendars

• Lists

  • Stacked Lists

  • Tables

  • Grid Lists

  • Feeds

• Forms

  • Form Layouts

  • Input Groups

  • Select Menus

  • Sign-in and Registration

  • Textareas

  • Radio Groups

  • Checkboxes

  • Toggles

  • Action Panels

  • Comboboxes

• Feedback

  • Alerts

  • Empty States

• Navigation

  • Navbars

  • Pagination

  • Tabs

  • Vertical Navigation

  • Sidebar Navigation

  • Breadcrumbs

  • Progress Bars

  • Command Palettes

• Overlays

  • Modal Dialogs

  • Drawers

  • Notifications

• Elements

  • Avatars

  • Badges

  • Dropdowns

  • Buttons

  • Button Groups

• Layout

  • Containers

  • Cards

  • List containers

  • Media Objects

  • Dividers

• Page Examples

  • Home Screens

  • Detail Screens

  • Settings Screens

5-day Mini-Course

Build UIs that don’t suck.

Short, tactical video lessons from the creator of Tailwind CSS, delivered directly to your inbox every day for a week.

Get the free course

Modal Dialogs

Use these Tailwind CSS modal dialog components to create pop-up boxes for things like alerts, notifications, or confirmation prompts. These modals are designed and built by the Tailwind CSS team, and include a variety of different styles and layouts.

Simple with gray footer

---

PreviewCode

HTMLReactVue

Simple with gray footer

---

PreviewCode

HTMLReactVue

Centered with single action

---

Preview

Get the code →

Centered with single action

---

Preview

Get the code →

Centered with wide buttons

---

Preview

Get the code →

Centered with wide buttons

---

Preview

Get the code →

Simple alert

---

Preview

Get the code →

Simple alert

---

Preview

Get the code →

Simple with dismiss button

---

Preview

Get the code →

Simple with dismiss button

---

Preview

Get the code →

Simple alert with left-aligned buttons

---

Preview

Get the code →

Simple alert with left-aligned buttons

---

Preview

Get the code →