CCHub Logo CCHub Tailwind Collection
Komponenten Kopfball Brutalistische Header-Komponente

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.

Vorschau

HTML-Code 

<header class="bg-gray-900 text-white p-6">
    <div class="flex justify-between items-center">
        <div class="flex items-center space-x-4">
            <img src="https://picsum.photos/50" alt="Logo" class="w-16 h-16 rounded-full border-4 border-yellow-500">
            <h1 class="text-3xl font-bold">Brutalist Header</h1>
        </div>
        <nav class="flex space-x-6">
            <a href="#" class="text-yellow-300 hover:underline">Home</a>
            <a href="#" class="text-yellow-300 hover:underline">About</a>
            <a href="#" class="text-yellow-300 hover:underline">Services</a>
            <a href="#" class="text-yellow-300 hover:underline">Contact</a>
        </nav>
    </div>
    <div class="mt-4 pt-4 border-t border-yellow-500 flex flex-col space-y-2">
        <h2 class="text-xl font-bold">Welcome to the Brutalist World</h2>
        <p class="text-sm">This is a header component that embodies the raw and bold aesthetics of Brutalism.</p>
    </div>
</header>

<style>
    @media (prefers-color-scheme: dark) {
        header {
            background-color: #1c1917;
            color: #f9fafb;
        }
        a {
            color: #fbbf24;
        }
    }
</style>

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

Header-Komponente

Rückenwind-Header-Komponente mit 3D-Design, Pastell-Farbschema, komplexer Komplexität, Dashboard-Zweck, responsivem Design und Unterstützung für dunkle Themen

Offen