RetroNav
Un componente di navigazione semplice, reattivo e compatibile con la modalità oscura con un design retrò/vintage, una combinazione di colori vivaci ed elementi minimali, adatto per siti Web di e-commerce.
Codice HTML
<nav class="bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 dark:from-gray-800 dark:via-gray-700 dark:to-gray-600 p-4">
<div class="container mx-auto flex items-center justify-between">
<div class="text-white text-2xl font-bold">RetroShop</div>
<div class="hidden md:flex space-x-4">
<a href="#" class="text-white hover:text-gray-200">Home</a>
<a href="#" class="text-white hover:text-gray-200">Products</a>
<a href="#" class="text-white hover:text-gray-200">About</a>
<a href="#" class="text-white hover:text-gray-200">Contact</a>
</div>
<div class="md:hidden">
<button class="text-white">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
</svg>
</button>
</div>
</div>
</nav>Componenti correlati
Componente di navigazione dei social media
Un componente di navigazione reattivo progettato per le interfacce dei social media, caratterizzato da un'estetica Material Design che utilizza un tema scuro con Tailwind CSS.
Componente di navigazione
Un componente di navigazione semplice e reattivo per un sito web portfolio, dotato di un'interfaccia utente in modalità scura. Il design utilizza colori complementari e garantisce leggibilità e appeal estetico su schermi di varie dimensioni.
Componente di navigazione per l'e-commerce brutalista
Un componente di navigazione per l'e-commerce complesso e brutalista che utilizza Tailwind CSS, con una combinazione di colori triadica (giallo, ciano, fucsia) ad alto contrasto (nero/bianco), un mega-menu solo CSS, rivelazione della ricerca solo CSS, un menu mobile reattivo solo CSS e supporto per la modalità oscura. Solo HTML, non JavaScript.