Barre de navigation rétro E-commerce
Un composant de navigation en niveaux de gris de style rétro/vintage pour le commerce électronique, présentant une complexité modérée avec des éléments interactifs tels que des survols et des listes déroulantes. Il est réactif et inclut la prise en charge du mode sombre à l’aide de Tailwind CSS.
HTML Code
<nav class="bg-white text-gray-700 dark:bg-gray-900 dark:text-gray-300 shadow-md">
<div class="container mx-auto px-4 py-4 flex justify-between items-center">
<div class="text-lg font-bold">RetroShop</div>
<div class="hidden md:flex space-x-6">
<a href="#" class="hover:text-gray-900 dark:hover:text-white transition duration-300">Home</a>
<div class="relative group">
<button class="hover:text-gray-900 dark:hover:text-white transition duration-300">Shop</button>
<div class="absolute hidden group-hover:block bg-white dark:bg-gray-800 shadow-lg mt-2 py-2 w-48">
<a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">All Products</a>
<a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">Category 1</a>
<a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">Category 2</a>
</div>
</div>
<a href="#" class="hover:text-gray-900 dark:hover:text-white transition duration-300">About</a>
<a href="#" class="hover:text-gray-900 dark:hover:text-white transition duration-300">Contact</a>
</div>
<div class="flex items-center space-x-4">
<a href="#" class="hover:text-gray-900 dark:hover:text-white transition duration-300">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<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" />
</svg>
</a>
<button class="md:hidden">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
</div>
</div>
</nav>Composants associés
Composant de navigation skeuomorphe
Un composant de navigation conçu avec un style skeuomorphe, avec une palette de couleurs complémentaires, adapté à un tableau de bord avec visualisation de données et panneaux de contrôle. Il comprend des éléments interactifs pour l’engagement des utilisateurs.
Navigation rétro sur les réseaux sociaux
Composant de navigation réactif avec mode sombre pour les médias sociaux (rétro/vintage, tons terreux, complexité modérée)
Composants de navigation
Un composant de navigation réactif avec prise en charge des micro-interactions et des thèmes sombres, conçu à l’aide de Tailwind CSS.