Tailwind Tools:
Button Generator
Table Tool
Modal Generator
Cards
Alerts
Progress
More
▼
Dropdown
Accordion
Popover
Tooltips
Pagination
Badges
Breadcrumbs
Text Maker
Link Maker
☰
Button Generator
Table Tool
Cards
Alerts
Progress
More
▼
Pagination
Dropdown
Badges
Breadcrumbs
Text Maker
Link Maker
Tailwind Modal Maker
Create and style beautiful modal components with Tailwind CSS
Modal Options
Modal Type
Select the type of modal to create
Basic
Form
Image
Video
Custom Content
Modal Size
Choose the size of your modal window
Small
Default
Large
Extra Large
Fullscreen
Modal Position
Set where the modal should appear on screen
Centered
Top
Bottom
Animation
Choose how your modal animates
Fade
No Animation
Include Header
Add a header section with title and close button
Header Text Color
Choose text color for the header
Default
White
Indigo
Blue
Green
Red
Yellow
Header Text Size
Choose size for the header text
Small
Medium
Large
Extra Large
Modal Body Content
Add content to your modal body
This is the modal body content. You can add text, images, forms, or any other content here.
Include Footer
Add a footer section with action buttons
Enable Scrolling Content
Allow content to scroll within the modal
Backdrop Type
Choose how the backdrop behaves
Dynamic (Click outside to close)
Static (Cannot close by clicking outside)
Close with Escape Key
Allow closing the modal with the ESC key
Trigger Type
Element that will open the modal
Button
Link
Trigger Text
Text displayed on the trigger element
Trigger Color
Color of the trigger button or link
Indigo
Blue
Green
Red
Yellow
Gray
Pink
Purple
Custom Classes
Add custom Tailwind classes to the modal
Enable Accessibility Attributes
Add ARIA attributes for better accessibility
Live Preview
Generated Code
Copy Code
Modal Tool Usage
Set the Modal Options Including:
Modal Type:
Basic, Form, Image and Video
Modal Size:
Default, Small, Large, Extra Large, Full Screen
Modal Position:
Centered, Top, or Bottom
Check the
"Include Header"
option and enter the Modal Title, Header Text Color, and Header Text Size
Similarly, to include the Footer, check the
"Include Footer"
option and enter the information
Modal Position
: Centered, Top, or Bottom