CCHub Logo CCHub Tailwind Collection
Komponenten Kopfball Skeuomorphe Header-Komponente

Skeuomorphe Header-Komponente

Eine einfache und reaktionsschnelle Header-Komponente, die für E-Commerce-Websites mit einem skeuomorphen Stil entwickelt wurde, ein Graustufen-Farbschema verwendet und den Dunkelmodus unterstützt.

Vorschau

HTML-Code 

<header class="bg-white dark:bg-gray-800 shadow-lg border-b border-gray-300 dark:border-gray-700 p-4">
    <div class="container mx-auto flex justify-between items-center">
        <div class="flex items-center space-x-4">
            <img src="https://picsum.photos/50/50" alt="Logo" class="rounded-full shadow-md">
            <h1 class="text-2xl font-bold text-gray-900 dark:text-white">ShopName</h1>
        </div>
        <nav class="flex space-x-4">
            <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-200">Home</a>
            <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-200">Products</a>
            <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-200">About Us</a>
            <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-200">Contact</a>
        </nav>
        <div class="relative">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full shadow-md">
            <span class="absolute top-0 right-0 bg-red-500 rounded-full h-2 w-2 border-2 border-white dark:border-gray-800"></span>
        </div>
    </div>
</header>

Verwandte Komponenten

Header-Komponente

Eine responsive Header-Komponente mit Unterstützung für den Dunkelmodus, mit einem Logo, Navigationslinks und einer Call-to-Action-Schaltfläche. Das Design verwendet einen dunklen Hintergrund, um die Belastung der Augen zu reduzieren.

Offen

E-Commerce-Header-Komponente

Eine responsive E-Commerce-Header-Komponente, die mit Tailwind CSS nach Material Design-Prinzipien erstellt wurde. Verfügt über ein monochromatisches Farbschema (Blautöne), Suchfunktionen, ein Navigationsmenü, einen Warenkorb und ein Benutzerprofil. Der Header enthält Tiefeneffekte wie Schatten und unterstützt den Dunkelmodus. Die Komponente reagiert vollständig auf ein mobiles Hamburger-Menü.

Offen

Social-Media-Header-Komponente

Eine komplexe, reaktionsschnelle Header-Komponente im Dunkelmodus mit minimalistischem Design und komplementärem Farbschema, die für Social-Media-Schnittstellen entwickelt wurde.

Offen