Brutalista Navigazione Appiccicosa
Un componente di navigazione appiccicosa in stile brutalista con comportamento reattivo e supporto per la modalità oscura utilizzando Tailwind CSS. Presenta un contrasto elevato, una tipografia audace e un'estetica cruda e cruda.
Codice HTML
<header class="bg-yellow-400 text-black sticky top-0 z-50 border-b-4 border-black dark:bg-purple-800 dark:text-white dark:border-white">
<nav class="container mx-auto px-6 py-4 flex justify-between items-center">
<div class="text-2xl font-bold uppercase tracking-tighter">Brutal Nav</div>
<div class="hidden md:flex space-x-6">
<a href="#" class="text-black hover:underline dark:text-white">Home</a>
<a href="#" class="text-black hover:underline dark:text-white">About</a>
<a href="#" class="text-black hover:underline dark:text-white">Services</a>
<a href="#" class="text-black hover:underline dark:text-white">Contact</a>
</div>
<button class="md:hidden text-black dark:text-white focus:outline-none">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-4 6h4"></path></svg>
</button>
</nav>
</header>Componenti correlati
Componente di navigazione permanente
Una barra di navigazione appiccicosa minimalista e reattiva per i blog, caratterizzata da una combinazione di colori vivaci. Supporta la modalità oscura e ha un layout semplice e pulito con "Titolo del blog" a sinistra e collegamenti di navigazione a destra. La barra di navigazione si blocca nella parte superiore del riquadro di visualizzazione quando l'utente scorre.
Componente di navigazione permanente
Un componente di navigazione appiccicosa scheumorfico progettato per siti Web di notizie/giornalismo, caratterizzato da una combinazione di colori in bianco e nero con un colore di accento brillante, reattività e supporto per la modalità scura. Imita i pulsanti del mondo reale e gli elementi incassati.
Componente di navigazione permanente
Componente di navigazione appiccicosa con design dello scheumorfismo, reattivo e supporto per temi scuri. Utilizza Tailwind CSS.