Componente intestazione brutalista
Un componente di intestazione grezzo e in grassetto progettato con Tailwind CSS, caratterizzato da un contrasto elevato e layout insoliti adatti sia per temi chiari che scuri.
Codice HTML
<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>Componenti correlati
Componente intestazione
Un componente dell'intestazione reattivo con design Glassmorphism con elementi traslucidi simili al vetro smerigliato e supporto per temi scuri.
Componente intestazione
Un componente di intestazione complesso e reattivo per un marketplace multi-vendor, ispirato all'estetica della carta/stampa con una combinazione di colori in tono gioiello. Include ricerca, navigazione, profilo utente e carrello.
Componente intestazione
Un componente di intestazione dal design minimalista e piatto per un portfolio, caratterizzato da un design reattivo con supporto per temi scuri e più elementi interattivi.