Navegación de comercio electrónico brutalista
Un componente de navegación de estilo brutalista para el comercio electrónico, con un esquema de color en escala de grises, diseño complejo, capacidad de respuesta y compatibilidad con el modo oscuro, creado con Tailwind CSS.
Código HTML
<nav class="bg-gray-900 text-white dark:bg-black dark:text-gray-100 p-4">
<div class="container mx-auto flex flex-wrap items-center justify-between">
<div class="text-2xl font-bold uppercase border-2 border-white dark:border-gray-100 p-2">Store</div>
<div class="block lg:hidden">
<button id="menu-toggle" class="text-white dark:text-gray-100 focus:outline-none">
<svg class="h-6 w-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>
</div>
<div id="menu" class="w-full lg:flex lg:items-center lg:w-auto hidden lg:block mt-4 lg:mt-0">
<ul class="uppercase text-sm lg:flex-grow">
<li class="block mt-4 lg:inline-block lg:mt-0 mr-6"><a href="#" class="block py-2 px-4 hover:bg-white hover:text-black border-2 border-transparent hover:border-white">Home</a></li>
<li class="block mt-4 lg:inline-block lg:mt-0 mr-6"><a href="#" class="block py-2 px-4 hover:bg-white hover:text-black border-2 border-transparent hover:border-white">Shop</a></li>
<li class="block mt-4 lg:inline-block lg:mt-0 mr-6"><a href="#" class="block py-2 px-4 hover:bg-white hover:text-black border-2 border-transparent hover:border-white">Categories</a></li>
<li class="block mt-4 lg:inline-block lg:mt-0"><a href="#" class="block py-2 px-4 hover:bg-white hover:text-black border-2 border-transparent hover:border-white">Contact</a></li>
</ul>
<div class="flex items-center mt-4 lg:mt-0">
<input type="text" placeholder="Search" class="p-2 text-black dark:text-white bg-white dark:bg-gray-800 border-2 border-white dark:border-gray-100 mr-4">
<a href="#" class="block py-2 px-4 hover:bg-white hover:text-black border-2 border-transparent hover:border-white">Cart (0)</a>
</div>
</div>
</div>
</nav>
<script>
const menuToggle = document.getElementById('menu-toggle');
const menu = document.getElementById('menu');
menuToggle.addEventListener('click', () => {
menu.classList.toggle('hidden');
});
</script>Componentes relacionados
Componente de navegación retro vintage
Un componente de navegación responsivo diseñado con una estética retro/vintage inspirada en los estilos de los años 80/90, con una combinación de colores pastel. Adecuado para interfaces de redes sociales, incluida la compatibilidad con el modo oscuro.
Componente de navegación de comercio electrónico brutalista
Un componente de navegación de comercio electrónico complejo y brutalista que utiliza Tailwind CSS, con un esquema de color triádico (amarillo, cian, fucsia) con alto contraste (blanco / negro), un megamenú solo CSS, revelación de búsqueda solo CSS, un menú móvil responsivo solo CSS y soporte de modo oscuro. Solo HTML, sin JavaScript.
Componente de navegación de Material Design
Un componente de navegación de Material Design simple y receptivo para interfaces de redes sociales que utiliza un esquema de color en escala de grises. Presenta un diseño limpio con logotipo, enlaces de navegación, barra de búsqueda y avatar de usuario. Incluye soporte para el modo oscuro usando el prefijo dark: de Tailwind.