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

Modale Komponente

Eine reaktionsschnelle modale Komponente, die mit Mikrointeraktionen und einem triadischen Farbschema gestaltet ist und für Social-Media-Schnittstellen entwickelt wurde. Es bietet Animationen, die Benutzer bei der Interaktion ansprechen, und bietet Unterstützung für dunkle Themen mit Tailwind CSS.

Offen

Healthcare_Medical_Modal_Component

Eine komplexe, reaktionsschnelle Modalkomponente für Anwendungen im Gesundheitswesen/Medizin, inspiriert vom Material Design mit einem Sunset/Warm-Farbschema. Enthält Formularelemente, Bilder und Unterstützung für den Dunkelmodus.

Offen

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.

Offen