CCHub Logo CCHub Tailwind Collection
Komponenten Navigation Retro-Navigationskomponente

Retro-Navigationskomponente

Eine Navigationskomponente im Retro-Stil mit Vintage-Ästhetik aus den 80er/90er Jahren, mit responsivem Design und Unterstützung für dunkle Themen mit Tailwind CSS.

Vorschau

HTML-Code 

<nav class="bg-white dark:bg-gray-800 shadow-lg p-6 rounded-lg">
    <div class="container mx-auto flex justify-between items-center">
        <div class="flex items-center space-x-4">
            <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
            <span class="text-xl font-bold text-gray-800 dark:text-white">Retro Nav</span>
        </div>
        <div class="hidden md:flex space-x-6">
            <a href="#" class="text-gray-800 dark:text-white hover:text-blue-500 transition duration-300">Home</a>
            <a href="#" class="text-gray-800 dark:text-white hover:text-blue-500 transition duration-300">About</a>
            <a href="#" class="text-gray-800 dark:text-white hover:text-blue-500 transition duration-300">Services</a>
            <a href="#" class="text-gray-800 dark:text-white hover:text-blue-500 transition duration-300">Contact</a>
        </div>
        <div class="md:hidden flex items-center">
            <button class="text-gray-800 dark:text-white focus:outline-none">
                <svg class="w-6 h-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-7 6h7"/>
                </svg>
            </button>
        </div>
    </div>
    <div class="mt-4 md:hidden">
        <div class="p-4 bg-gray-200 dark:bg-gray-700 rounded-lg">
            <a href="#" class="block text-gray-800 dark:text-white hover:text-blue-500 transition duration-300 py-2">Home</a>
            <a href="#" class="block text-gray-800 dark:text-white hover:text-blue-500 transition duration-300 py-2">About</a>
            <a href="#" class="block text-gray-800 dark:text-white hover:text-blue-500 transition duration-300 py-2">Services</a>
            <a href="#" class="block text-gray-800 dark:text-white hover:text-blue-500 transition duration-300 py-2">Contact</a>
        </div>
    </div>
</nav>

Verwandte Komponenten

Neumorphism-Navigationskomponente

Neumorphism-Navigationskomponente, optimiert für Portfolio-Websites. Es verfügt über ein komplexes Layout mit mehreren interaktiven Elementen, ein responsives Design und Unterstützung für den Dunkelmodus mit Tailwind CSS. Das Farbschema ist analog.

Offen

RetroNav

Eine einfache, reaktionsschnelle und mit dem Dunkelmodus kompatible Navigationskomponente mit Retro-/Vintage-Design, lebendigem Farbschema und minimalen Elementen, die für E-Commerce-Websites geeignet ist.

Offen

3D-Navigationskomponente

Eine reaktionsschnelle 3D-Navigationskomponente für den E-Commerce mit einem Graustufen-Farbschema und Unterstützung für den Dunkelmodus.

Offen