CCHub Logo CCHub Tailwind Collection
Komponenten Kopfball Header-Komponente

Header-Komponente

Eine einfache Header-Komponente, die im Neumorphism-Stil mit leuchtenden Farben entworfen wurde und sich perfekt für einen Blog/eine Content-Webseite eignet. Es bietet Unterstützung für den Dunkelmodus für responsives Design.

Vorschau

HTML-Code 

<header class="p-4 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-md flex justify-between items-center">
    <div class="flex items-center">
        <img src="https://picsum.photos/50" alt="Logo" class="rounded-full shadow-md" />
        <h1 class="text-2xl font-bold text-gray-800 dark:text-white ml-2">My Blog</h1>
    </div>
    <nav class="flex space-x-4">
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition duration-200">Home</a>
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition duration-200">About</a>
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition duration-200">Contact</a>
    </nav>
</header>

Verwandte Komponenten

Brutalistische Header-Komponente

Eine rohe und fette Header-Komponente, die mit Tailwind CSS entworfen wurde und sich durch hohen Kontrast und ungewöhnliche Layouts auszeichnet, die sowohl für helle als auch für dunkle Themen geeignet sind.

Offen

DarkTriadicSimpleBusinessHeader

Responsive Header-Komponente mit Unterstützung des Dunkelmodus für Unternehmenswebsites

Offen

Material Design Business Header

Material Design inspirierte eine einfache Header-Komponente mit komplementärem Farbschema für Unternehmenswebsites. Responsives Design mit Unterstützung für dunkle Themen.

Offen