Material Design Modal
A Material Design-styled Modal Component with responsive design and dark theme support. Includes a modal overlay, a modal container with a card-like appearance, and a close button. No JavaScript is included.
HTML Code
<div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full">
<div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white dark:bg-gray-800">
<div class="mt-3 text-center">
<h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">Modal Title</h3>
<div class="mt-2 px-7 py-3">
<p class="text-sm text-gray-500 dark:text-gray-300">Modal content goes here. This is a placeholder for your information.</p>
</div>
<div class="items-center px-4 py-3">
<button id="ok-btn" class="px-4 py-2 bg-blue-500 text-white text-base font-medium rounded-md w-full shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500">Got It!</button>
</div>
</div>
</div>
</div>Related Components
Retro Vintage Modal Component
A responsive retro/vintage modal component designed with Tailwind CSS that includes dark mode support and nostalgic 80s/90s aesthetics.
Skeuomorphism Earthy Modal Component
A complex, responsive Modal Component with Skeuomorphism design, Earth tones color scheme, and dark theme support for Portfolio use. Features multiple interactive elements without JavaScript.
Modal Component
A responsive modal component styled with microinteractions and triadic color scheme, designed for social media interfaces. It features animations that engage users upon interaction and provides dark theme support using Tailwind CSS.