CCHub Logo CCHub Tailwind Collection
Komponenten Kapital Modalkomponente im Dunkelmodus

Modalkomponente im Dunkelmodus

Eine einfache, reaktionsschnelle modale Komponente, die für Social-Media-Schnittstellen im Dunkelmodus mit einem pastellfarbenen Farbschema entwickelt wurde.

Vorschau

HTML-Code 

<div class="fixed inset-0 flex items-center justify-center z-50 bg-gray-900 bg-opacity-80 dark:bg-gray-800">
    <div class="bg-gray-800 rounded-lg shadow-lg w-11/12 md:w-1/3 p-6">
        <h2 class="text-xl font-bold text-white mb-4">Welcome to Our Community!</h2>
        <p class="text-gray-300 mb-4">Join us in sharing ideas, experiences, and connecting with one another. We believe in the power of community.</p>
        <div class="flex items-center mb-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-3">
            <span class="text-pink-200 font-semibold">John Doe</span>
        </div>
        <img src="https://picsum.photos/300/150" alt="Placeholder" class="rounded-lg mb-4">
        <button class="w-full bg-pink-500 hover:bg-pink-400 text-white font-bold py-2 px-4 rounded">Join Now</button>
        <button class="w-full mt-2 bg-transparent border border-pink-500 hover:bg-pink-500 hover:text-white text-pink-500 font-bold py-2 px-4 rounded">Cancel</button>
    </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

Komplexes erdiges Business Modal mit Mikrointeraktionen

Eine komplexe, reaktionsschnelle, erdfarbene Modalkomponente mit Mikrointeraktionen, die für Unternehmenswebsites geeignet ist und den Dunkelmodus unterstützt.

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