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
RetroVintageEarthToneModal
Retro/Vintage-Modalkomponente in Erdtönen für Dashboard mit Dunkelmodus und Reaktionsfähigkeit
Retro Vintage Modal Komponente
Eine einfache Retro-/Vintage-Modalkomponente mit einem komplementären Farbschema für die Präsentation von Arbeiten oder Produkten, die mit Tailwind CSS entworfen wurde.
Skeuomorphe Modalkomponente
Eine komplexe, reaktionsschnelle Modalkomponente in einem skeuomorphen Design mit Komplementärfarben für den E-Commerce.