Componente de navegación pegajosa
Un componente de navegación pegajosa de modo oscuro para comercio electrónico, que utiliza un esquema de color complementario y un diseño básico.
Código HTML
<nav class="bg-gray-900 sticky top-0 shadow-lg">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex">
<div class="flex-shrink-0">
<img class="h-8" src="https://picsum.photos/50/50" alt="Logo">
</div>
<div class="hidden md:flex md:space-x-8 ml-10">
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Home</a>
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Shop</a>
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">About</a>
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Contact</a>
</div>
</div>
<div class="flex items-center">
<button class="text-gray-300 hover:bg-gray-700 hover:text-white p-1 rounded-full">
<img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Profile">
</button>
</div>
</div>
</div>
</nav>Componentes relacionados
Componente de navegación pegajosa
Un componente de navegación pegajoso diseñado para el modo oscuro con efectos responsivos mediante Tailwind CSS.
Navegación pegajosa (glassmorphism)
Componente de navegación pegajoso con estilo Glassmorphism, responsivo y soporte de tema oscuro.
Componente de navegación pegajosa
Componente de navegación pegajosa y receptivo con modo oscuro