Modals
Copy-paste ready modal dialog components
Basic Modal
Simple modal dialog with title and content
Modal Title
This is a basic modal dialog. Click the button below to close it.
<button onclick="document.getElementById('modal').classList.remove('hidden')">
Open Modal
</button>
<div id="modal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
<div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
<div class="mt-3">
<h3 class="text-lg font-medium leading-6 text-gray-900">Modal Title</h3>
<div class="mt-2 px-7 py-3">
<p class="text-sm text-gray-500">This is a basic modal dialog.</p>
</div>
<div class="flex justify-end px-4 py-3">
<button onclick="document.getElementById('modal').classList.add('hidden')" class="px-4 py-2 bg-gray-500 text-white text-sm rounded-md">
Close
</button>
</div>
</div>
</div>
</div>Confirmation Modal
Modal with confirm and cancel actions
Delete Confirmation
Are you sure you want to delete this item? This action cannot be undone.
<div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
<div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
<div class="mt-3">
<div class="flex items-center justify-center w-12 h-12 mx-auto bg-red-100 rounded-full">
<svg class="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</div>
<h3 class="text-lg font-medium text-gray-900 text-center mt-4">Delete Confirmation</h3>
<div class="mt-2 px-7 py-3">
<p class="text-sm text-gray-500 text-center">Are you sure you want to delete this item?</p>
</div>
<div class="flex gap-3 px-4 py-3">
<button class="flex-1 px-4 py-2 bg-gray-300 text-gray-700 text-sm rounded-md">Cancel</button>
<button class="flex-1 px-4 py-2 bg-red-600 text-white text-sm rounded-md">Delete</button>
</div>
</div>
</div>
</div>Form Modal
Modal containing a form
Add New User
<div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
<div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-medium text-gray-900">Add New User</h3>
<button class="text-gray-400 hover:text-gray-600">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">...</svg>
</button>
</div>
<form class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Name</label>
<input type="text" class="w-full px-3 py-2 border rounded-md">
</div>
<div class="flex justify-end gap-3 pt-4">
<button type="button" class="px-4 py-2 bg-gray-300 text-gray-700 rounded-md">Cancel</button>
<button type="submit" class="px-4 py-2 bg-green-600 text-white rounded-md">Add User</button>
</div>
</form>
</div>
</div>Large Modal
Wider modal for more content
Large Modal Title
This is a larger modal that can accommodate more content. It's perfect for detailed forms, extensive information, or complex interactions.
Feature 1
Description of feature 1
Feature 2
Description of feature 2
Feature 3
Description of feature 3
Feature 4
Description of feature 4
<div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
<div class="relative top-20 mx-auto p-5 border max-w-2xl shadow-lg rounded-md bg-white">
<div class="flex items-center justify-between mb-4">
<h3 class="text-xl font-medium text-gray-900">Large Modal Title</h3>
<button class="text-gray-400 hover:text-gray-600">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">...</svg>
</button>
</div>
<div class="space-y-4">
<p class="text-sm text-gray-500">Content goes here...</p>
</div>
<div class="flex justify-end gap-3 mt-6">
<button class="px-4 py-2 bg-gray-300 text-gray-700 rounded-md">Close</button>
</div>
</div>
</div>Success Modal
Modal with success message and icon
Success!
Your changes have been successfully saved. You can now continue working.
<div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
<div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
<div class="mt-3 text-center">
<div class="flex items-center justify-center w-12 h-12 mx-auto bg-green-100 rounded-full">
<svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</div>
<h3 class="text-lg font-medium text-gray-900 mt-4">Success!</h3>
<div class="mt-2 px-7 py-3">
<p class="text-sm text-gray-500">Your changes have been saved.</p>
</div>
<div class="flex justify-center px-4 py-3">
<button class="px-6 py-2 bg-green-600 text-white text-sm rounded-md">Continue</button>
</div>
</div>
</div>
</div>Scrollable Modal
Modal with scrollable content
Terms and Conditions
Please read these terms and conditions carefully before using our service.
1. Introduction
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
2. User Responsibilities
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
3. Privacy Policy
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
4. Limitations
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
<div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-medium text-gray-900">Terms and Conditions</h3>
<button class="text-gray-400 hover:text-gray-600">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">...</svg>
</button>
</div>
<div class="max-h-96 overflow-y-auto px-2">
<p class="text-sm text-gray-600">Long scrollable content...</p>
</div>
<div class="flex justify-end gap-3 mt-4 pt-4 border-t">
<button class="px-4 py-2 bg-gray-300 text-gray-700 rounded-md">Decline</button>
<button class="px-4 py-2 bg-indigo-600 text-white rounded-md">Accept</button>
</div>
</div>
</div>