CCHub Logo CCHub Tailwind Collection
Komponenten Kopfball Header-Komponente

Header-Komponente

Eine responsive Header-Komponente mit Glassmorphism-Design mit mattglasähnlichen, durchscheinenden Elementen und Unterstützung für dunkle Themen.

Vorschau

HTML-Code 

<header class="bg-white bg-opacity-30 backdrop-blur-lg dark:bg-gray-800 dark:bg-opacity-60 shadow-lg p-4 flex justify-between items-center">
    <div class="flex items-center">
        <img src="https://picsum.photos/50/50" alt="Logo" class="rounded-full mr-2">
        <h1 class="text-xl font-bold text-gray-900 dark:text-white">My Website</h1>
    </div>
    <nav class="space-x-4">
        <a href="#" class="text-gray-800 dark:text-gray-200 hover:underline">Home</a>
        <a href="#" class="text-gray-800 dark:text-gray-200 hover:underline">About</a>
        <a href="#" class="text-gray-800 dark:text-gray-200 hover:underline">Services</a>
        <a href="#" class="text-gray-800 dark:text-gray-200 hover:underline">Contact</a>
    </nav>
    <div class="flex items-center">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-10 h-10">
    </div>
</header>

Verwandte Komponenten

Header-Komponente

Header-Komponente mit Mikrointeraktionen, komplementärem Farbschema, komplexer Komplexität, für Dashboard-Zwecke, mit Tailwind CSS.

Offen

SocialMediaHeader

Eine reaktionsschnelle Header-Komponente für Social-Media-Schnittstellen, die mit einer Benutzeroberfläche im Dunkelmodus unter Verwendung eines triadischen Farbschemas und minimaler Elemente entworfen wurde. Es enthält einen Website-Titel, eine Suchleiste und einen Link zum Benutzerprofil mit Stilen, die für den Dunkelmodus mit Tailwind CSS angepasst sind.

Offen

Header-Komponente

Eine komplexe, reaktionsschnelle Header-Komponente für einen Multi-Vendor-Marktplatz, inspiriert von der Papier-/Druckästhetik mit einem juwelenfarbenen Farbschema. Enthält Suche, Navigation, Benutzerprofil und Warenkorb.

Offen