CCHub Logo CCHub Tailwind Collection
Komponenten Mega-Menü Mega-Menü-Komponente

Mega-Menü-Komponente

Mega Menu-Komponente mit Unterstützung für den Dunkelmodus

Vorschau

HTML-Code 

<nav class="bg-gray-900 shadow-lg">
    <div class="container mx-auto px-4">
        <div class="flex items-center justify-between py-4">
            <a href="#" class="text-white text-xl font-bold">Logo</a>
            <div class="hidden md:flex md:items-center md:space-x-4">
                <a href="#" class="text-gray-300 hover:text-white transition duration-300">Home</a>
                <div class="relative group">
                    <button class="text-gray-300 hover:text-white transition duration-300">Products</button>
                    <div class="absolute z-10 hidden group-hover:block bg-gray-800 shadow-lg mt-2 rounded-md">
                        <a href="#" class="block px-4 py-2 text-gray-300 hover:text-white">Product 1</a>
                        <a href="#" class="block px-4 py-2 text-gray-300 hover:text-white">Product 2</a>
                        <a href="#" class="block px-4 py-2 text-gray-300 hover:text-white">Product 3</a>
                    </div>
                </div>
                <a href="#" class="text-gray-300 hover:text-white transition duration-300">About</a>
                <a href="#" class="text-gray-300 hover:text-white transition duration-300">Contact</a>
            </div>
            <div class="md:hidden">
                <button class="text-gray-300 hover:text-white focus:outline-none">
                    <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-4 6h4"></path>
                    </svg>
                </button>
            </div>
        </div>
    </div>
</nav>

Verwandte Komponenten

Mega-Menü-Komponente

Eine Mega-Menü-Komponente im Neumorphism-Stil mit einem monochromatischen Farbschema, das für Blogs und den Konsum von Inhalten entwickelt wurde. Es unterstützt responsives Design mit dunklem Modus.

Offen

Mega-Menü-Komponente

Eine reaktionsschnelle Mega-Menü-Komponente, die mit Skeuomorphismus gestaltet ist und Unterstützung für dunkle Designs mit Tailwind CSS bietet.

Offen

Mega-Menü-Komponente

Mega-Menükomponente mit Benutzeroberfläche im Dunkelmodus, analogem Farbschema und komplexer Komplexität für Dashboard-Zwecke unter Verwendung von Tailwind CSS. Es sollte reaktionsschnell sein und das dunkle Design unterstützen, indem es das Präfix Tailwind dark: verwendet. Kein JavaScript-Code erforderlich, nur HTML mit Tailwind-Klassen. Die Bilder stammen von picsum.photos und Avatare von randomuser.me.

Offen