Materialdesign Modal
Eine Modal-Komponente im Material Design-Stil mit responsivem Design und Unterstützung für dunkle Themen. Enthält ein modales Overlay, einen modalen Container mit einem kartenähnlichen Aussehen und eine Schaltfläche zum Schließen. Es ist kein JavaScript enthalten.
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>Verwandte Komponenten
Retro Vintage Modal Komponente
Eine reaktionsschnelle Retro-/Vintage-Modal-Komponente, die mit Tailwind CSS entwickelt wurde und Unterstützung für den Dunkelmodus und nostalgische Ästhetik der 80er/90er Jahre bietet.
Skeuomorphes Modal
Eine einfache, reaktionsschnelle, skeuomorph inspirierte Modalkomponente für Unterhaltungs-/Medienplattformen mit coolen neutralen Farben und Unterstützung für den Dunkelmodus.
Neon Dashboard Modal
Ein komplexes, reaktionsschnelles Dashboard-Modal mit Neon-/Leuchteffekten, Herbstfarben, Unterstützung für den Dunkelmodus und interaktiven Elementen. Entwickelt für Datenvisualisierung und Bedienfelder.