Navigation autocollante rétro E-commerce
Un composant de navigation autocollant rétro/vintage pour les sites de commerce électronique avec des couleurs vives, des éléments complexes, une réactivité et une prise en charge du mode sombre à l’aide de Tailwind CSS.
HTML Code
<nav class="bg-gradient-to-r from-purple-600 via-pink-600 to-red-600 text-white sticky top-0 z-50 shadow-lg dark:from-gray-800 dark:via-gray-700 dark:to-gray-600">
<div class="container mx-auto px-4 py-3 flex items-center justify-between">
<!-- Logo/Brand -->
<div class="flex items-center">
<span class="text-2xl font-bold font-serif italic">RetroFinds</span>
</div>
<!-- Navigation Links -->
<div class="hidden md:flex space-x-6">
<a href="#" class="hover:text-yellow-300 transition duration-300 ease-in-out font-mono">New Arrivals</a>
<a href="#" class="hover:text-yellow-300 transition duration-300 ease-in-out font-mono">Shop All</a>
<a href="#" class="hover:text-yellow-300 transition duration-300 ease-in-out font-mono">Sale</a>
<a href="#" class="hover:text-yellow-300 transition duration-300 ease-in-out font-mono">Contact</a>
</div>
<!-- Search and Icons -->
<div class="flex items-center space-x-4">
<div class="relative">
<input type="text" placeholder="Search..." class="bg-white text-gray-800 rounded-full py-1 px-4 focus:outline-none focus:ring-2 focus:ring-yellow-300 dark:bg-gray-700 dark:text-white">
<svg class="h-5 w-5 text-gray-400 absolute right-3 top-1/2 transform -translate-y-1/2 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
</div>
<a href="#" class="relative">
<svg class="h-6 w-6 hover:text-yellow-300 transition duration-300 ease-in-out" 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 2a2 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>
<a href="#">
<svg class="h-6 w-6 hover:text-yellow-300 transition duration-300 ease-in-out" 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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
</a>
</div>
<!-- Mobile Menu Button -->
<div class="md:hidden flex items-center">
<button class="mobile-menu-button">
<svg class="w-6 h-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 12h16M4 18h16"></path></svg>
</button>
</div>
</div>
<!-- Mobile Menu Content (hidden by default) -->
<div class="mobile-menu hidden md:hidden bg-purple-500 dark:bg-gray-700">
<a href="#" class="block py-2 px-4 text-sm hover:bg-purple-600 dark:hover:bg-gray-600 font-mono">New Arrivals</a>
<a href="#" class="block py-2 px-4 text-sm hover:bg-purple-600 dark:hover:bg-gray-600 font-mono">Shop All</a>
<a href="#" class="block py-2 px-4 text-sm hover:bg-purple-600 dark:hover:bg-gray-600 font-mono">Sale</a>
<a href="#" class="block py-2 px-4 text-sm hover:bg-purple-600 dark:hover:bg-gray-600 font-mono">Contact</a>
</div>
</nav>Composants associés
Composant de navigation collante
Une barre de navigation simple, réactive et collante adaptée à une place de marché, avec un schéma de couleurs analogue et la prise en charge du mode sombre. Comprend des micro-interactions subtiles au survol.
Composant de navigation collante
Barre de navigation autocollante minimaliste et réactive pour un site Web météo/climat, avec des couleurs neutres froides, la prise en charge du mode sombre et des éléments interactifs. Conçu pour une complexité moyenne avec des liens fonctionnels et une barre de recherche.
Composant de navigation collante
Un composant de navigation autocollant avec un design skeuomorphe, une palette de couleurs triadique et une mise en page simple, adapté aux interfaces de médias sociaux. Il prend en charge le design réactif et le thème sombre.