Componente de navegación pegajosa
Un componente de navegación pegajoso para el comercio electrónico, con un diseño minimalista/plano con colores vibrantes. Incluye un logotipo, una barra de búsqueda, un icono de carrito y un avatar de usuario, todo ello con Tailwind CSS para mejorar la capacidad de respuesta y la compatibilidad con temas oscuros.
Código HTML
<nav class="sticky top-0 z-50 bg-white dark:bg-gray-900 shadow-md">
<div class="container mx-auto px-4 py-3 flex items-center justify-between">
<!-- Logo -->
<a href="#" class="text-2xl font-bold text-indigo-600 dark:text-indigo-400">YourStore</a>
<!-- Search Bar (hidden on small screens, shown on medium and up) -->
<div class="hidden md:flex items-center flex-grow mx-4 relative">
<input type="text" placeholder="Search products..." class="w-full py-2 pl-10 pr-4 rounded-full bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-white focus:outline-none focus:ring-2 focus:ring-indigo-500">
<svg class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 dark:text-gray-500 w-5 h-5" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
</div>
<!-- Navigation Icons -->
<div class="flex items-center space-x-4">
<!-- Cart Icon -->
<a href="#" class="relative p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 transition duration-300">
<svg class="w-6 h-6 text-gray-600 dark:text-gray-300" 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="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 4a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
<span class="absolute top-0 right-0 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-red-100 transform translate-x-1/2 -translate-y-1/2 bg-red-600 rounded-full">3</span>
</a>
<!-- User Avatar -->
<a href="#" class="p-1 rounded-full focus:outline-none focus:ring-2 focus:ring-indigo-500">
<img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
</a>
<!-- Mobile Menu Button (shown on small screens) -->
<button class="md:hidden p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 transition duration-300">
<svg class="w-6 h-6 text-gray-600 dark:text-gray-300" 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 12h16M4 18h16"></path></svg>
</button>
</div>
</div>
<!-- Mobile Search Bar (shown on small screens, hidden on medium and up) -->
<div class="md:hidden px-4 py-2">
<div class="relative">
<input type="text" placeholder="Search products..." class="w-full py-2 pl-10 pr-4 rounded-full bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-white focus:outline-none focus:ring-2 focus:ring-indigo-500">
<svg class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 dark:text-gray-500 w-5 h-5" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
</div>
</div>
</nav>Componentes relacionados
Componente de navegación pegajosa
Un componente de navegación pegajoso diseñado en un estilo skeuomórfico, adecuado para sitios web de comercio electrónico con un diseño responsivo y soporte de temas oscuros utilizando Tailwind CSS.
Navegación pegajosa skeuomórfica en escala de grises
Una barra de navegación pegajosa y receptiva para blogs, diseñada con esqueuomorfismo utilizando una paleta en escala de grises. Cuenta con soporte para modo oscuro y un diseño simple. Construido con Tailwind CSS (solo HTML), sin JavaScript. El diseño skeuomórfico tiene como objetivo hacer que la barra de navegación parezca un elemento físico ligeramente elevado.
Componente de navegación pegajosa
Un componente de navegación pegajoso diseñado en un estilo skeuomórfico, que muestra colores complementarios, adecuado para una cartera con una interfaz rica.