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
Una barra de navegación compleja, esqueuomórfica y pegajosa con colores vibrantes, diseñada para interfaces de redes sociales. Incluye diseño responsivo y soporte para el modo oscuro usando Tailwind CSS. Cuenta con imagen de perfil, barra de búsqueda, notificaciones e iconos de mensajería.
Componente de navegación pegajosa
Componente de navegación pegajosa con diseño Skeuomorphism, responsivo y soporte de tema oscuro. Utiliza Tailwind CSS.
Componente de navegación pegajosa
Una barra de navegación fija minimalista y receptiva para blogs, con una combinación de colores vibrantes. Es compatible con el modo oscuro y tiene un diseño simple y limpio con "Título del blog" a la izquierda y enlaces de navegación a la derecha. La barra de navegación se adhiere a la parte superior de la ventanilla cuando el usuario se desplaza.