Componente de la barra de navegación
Una barra de navegación responsiva para un sitio web de comercio electrónico, con un estilo de diseño de glassmorphism con un esquema de color en escala de grises y soporte para modo oscuro con Tailwind CSS.
Código HTML
<nav class="bg-white bg-opacity-30 backdrop-blur-md dark:bg-gray-800 dark:bg-opacity-30 border-b border-gray-200 dark:border-gray-700 fixed w-full z-10">
<div class="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8">
<div class="relative flex items-center justify-between h-16">
<div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
<button class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 dark:text-gray-300 hover:text-gray-500 hover:dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-gray-500 dark:focus:ring-offset-gray-800" aria-controls="mobile-menu" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
</svg>
</button>
</div>
<div class="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start">
<div class="flex-shrink-0">
<a href="#" class="text-2xl font-bold text-gray-800 dark:text-white">E-Shop</a>
</div>
<div class="hidden sm:block sm:ml-6">
<div class="flex space-x-4">
<a href="#" class="text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-700 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">Home</a>
<a href="#" class="text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-700 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">Products</a>
<a href="#" class="text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-700 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">About Us</a>
<a href="#" class="text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-700 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">Contact</a>
</div>
</div>
</div>
<div class="hidden sm:block">
<div class="flex items-center">
<a href="#" class="text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-700 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">Login</a>
<a href="#" class="text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-700 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">Cart</a>
</div>
</div>
</div>
</div>
</nav>
<div class="sm:hidden" id="mobile-menu">
<div class="px-2 pt-2 pb-3 space-y-1">
<a href="#" class="text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-700 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Home</a>
<a href="#" class="text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-700 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Products</a>
<a href="#" class="text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-700 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">About Us</a>
<a href="#" class="text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-700 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Contact</a>
<a href="#" class="text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-700 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Login</a>
<a href="#" class="text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-700 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Cart</a>
</div>
</div>Componentes relacionados
Componente de la barra de navegación
Una barra de navegación responsiva para un tablero, con un tema de modo oscuro con tonos tierra. Incluye un logotipo, enlaces de navegación, una barra de búsqueda y una sección de perfil de usuario. Diseñado para una complejidad moderada con elementos interactivos.
Barra de navegación Skeuomorphic
Una barra de navegación responsiva simple para redes sociales con un estilo de diseño esqueuomórfico, que utiliza un esquema de color análogo y admite el modo oscuro.
Barra de navegación de redes sociales skeuomórfica
Barra de navegación de redes sociales skeuomórfica con esquema de color triádico y complejidad moderada.