Barra de navegación retro de comercio electrónico
Un componente de navegación en escala de grises de estilo retro/vintage para el comercio electrónico, que presenta una complejidad moderada con elementos interactivos como desplazamientos y menús desplegables. Es responsivo e incluye soporte para el modo oscuro usando Tailwind CSS.
Código 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>Componentes relacionados
Componente de navegación 43
Un componente de navegación responsivo que sigue los principios de diseño skeuomórfico, con elementos digitales que imitan a sus contrapartes del mundo real, con soporte para temas oscuros.
Componentes de navegación
Un componente de navegación responsivo con microinteracciones y soporte para temas oscuros, diseñado con Tailwind CSS.
Componentes de navegación
Un componente de navegación minimalista para un sitio web de comercio electrónico, con un logotipo, una barra de búsqueda, enlaces de navegación, un icono de carrito de compras y un avatar de usuario que utiliza Tailwind CSS. Este componente es compatible con el diseño responsivo y el modo oscuro.