CCHub Logo CCHub Tailwind Collection
Komponenten Kapital Modalkomponente im Dunkelmodus

Modalkomponente im Dunkelmodus

Eine einfache und reaktionsschnelle modale Komponente im Dunkelmodus, die für das Lesen und den Konsum von Inhalten entwickelt wurde. Es verfügt über ein komplementäres Farbschema und ein minimales Layout, das für Blogs oder inhaltsgesteuerte Websites geeignet ist.

Vorschau

HTML-Code 

<div class="fixed inset-0 z-50 flex items-center justify-center bg-gray-800 bg-opacity-75 dark:bg-gray-900" role="dialog" aria-modal="true">
    <div class="bg-gray-900 rounded-lg shadow-lg max-w-sm w-full p-6">
        <button class="absolute top-3 right-3 text-gray-500 hover:text-gray-300 dark:text-gray-400 dark:hover:text-gray-200" aria-label="Close">&times;</button>
        <h2 class="text-xl text-white font-semibold mb-4">Blog Post Title</h2>
        <img class="w-full h-32 object-cover rounded-lg mb-4" src="https://picsum.photos/400/200" alt="Random Image">
        <p class="text-gray-300 dark:text-gray-200 mb-4">This is a simple modal component designed for displaying content in dark mode. It is responsive and features a clean layout that aids in reading.</p>
        <div class="flex items-center">
            <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
            <div>
                <p class="text-sm text-gray-400 dark:text-gray-300">Posted by John Doe</p>
                <p class="text-xs text-gray-500 dark:text-gray-400">3 minutes ago</p>
            </div>
        </div>
    </div>
</div>

Verwandte Komponenten

Retro Blog Modal

Eine Retro-Vintage-inspirierte modale Komponente für Blog-Inhalte mit einem komplementären Farbschema, moderater Komplexität mit interaktiven Elementen, responsivem Design und Unterstützung für den Dunkelmodus. Es wird kein JavaScript verwendet, sondern verlässt sich ausschließlich auf HTML- und Tailwind-CSS-Klassen. Die Bilder stammen von picsum.photos und die Avatare von randomuser.me.

Offen

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.

Offen

Skeuomorphismus Erdige Modalkomponente

Eine komplexe, reaktionsschnelle Modalkomponente mit Skeuomorphismus-Design, Farbschema in Erdtönen und Unterstützung für dunkle Themen für die Portfolio-Verwendung. Bietet mehrere interaktive Elemente ohne JavaScript.

Offen