Barra di navigazione retrò per l'e-commerce
Un componente di navigazione in scala di grigi in stile retrò/vintage per l'e-commerce, caratterizzato da una complessità moderata con elementi interattivi come passaggi del mouse e menu a discesa. È reattivo e include il supporto per la modalità oscura utilizzando Tailwind CSS.
Codice HTML
<nav class="bg-white text-gray-700 dark:bg-gray-900 dark:text-gray-300 shadow-md">
<div class="container mx-auto px-4 py-4 flex justify-between items-center">
<div class="text-lg font-bold">RetroShop</div>
<div class="hidden md:flex space-x-6">
<a href="#" class="hover:text-gray-900 dark:hover:text-white transition duration-300">Home</a>
<div class="relative group">
<button class="hover:text-gray-900 dark:hover:text-white transition duration-300">Shop</button>
<div class="absolute hidden group-hover:block bg-white dark:bg-gray-800 shadow-lg mt-2 py-2 w-48">
<a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">All Products</a>
<a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">Category 1</a>
<a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">Category 2</a>
</div>
</div>
<a href="#" class="hover:text-gray-900 dark:hover:text-white transition duration-300">About</a>
<a href="#" class="hover:text-gray-900 dark:hover:text-white transition duration-300">Contact</a>
</div>
<div class="flex items-center space-x-4">
<a href="#" class="hover:text-gray-900 dark:hover:text-white transition duration-300">
<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="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
</svg>
</a>
<button class="md:hidden">
<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
Componenti di navigazione
Un componente di navigazione reattivo che segue i principi del Material Design con una combinazione di colori triadica, rivolto alle interfacce dei social media, con supporto per la modalità scura.
Componente Componenti di navigazione
Un componente di navigazione reattivo con supporto per la modalità oscura utilizzando Tailwind CSS. Include un logo, link di navigazione e un pulsante di invito all'azione.
Componente di navigazione minimalista Earth Tones
Un componente di navigazione dal design minimalista e piatto con una combinazione di colori color terra, adatto per siti Web di consulenza/servizi. Include un design reattivo per desktop, tablet e dispositivi mobili e supporta la modalità oscura.