Composants de navigation
Un composant de navigation minimaliste pour un site Web de commerce électronique, avec un logo, une barre de recherche, des liens de navigation, une icône de panier d’achat et un avatar de l’utilisateur à l’aide de Tailwind CSS. Ce composant prend en charge le responsive design et le mode sombre.
HTML Code
<nav class="bg-white dark:bg-gray-800 p-4 flex items-center justify-between"> <div class="flex items-center"> <img src="https://picsum.photos/100/50" alt="Logo" class="h-10 mr-4"> <ul class="hidden md:flex space-x-8 text-gray-700 dark:text-gray-300"> <li><a href="#" class="hover:underline">Home</a></li> <li><a href="#" class="hover:underline">Shop</a></li> <li><a href="#" class="hover:underline">About</a></li> <li><a href="#" class="hover:underline">Contact</a></li> </ul> </div> <div class="flex items-center"> <div class="relative"> <input type="text" placeholder="Search" class="border border-gray-300 dark:border-gray-600 rounded-lg py-2 pl-10 pr-4 focus:outline-none focus:ring focus:ring-gray-300 dark:focus:ring-gray-600"><span class="absolute left-3 top-2 text-gray-400 dark:text-gray-500"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-4.35-4.35M16.65 10.65A5.48 5.48 0 0015 12a5.48 5.48 0 01-1.65 4.35A5.48 5.48 0 0012 17a5.48 5.48 0 00-4.35-1.65A5.48 5.48 0 007 12a5.48 5.48 0 011.65-4.35A5.48 5.48 0 0012 7c1.3 0 2.57.47 3.65 1.65z"/></svg></span> </div> <a href="#" class="ml-4 text-gray-700 dark:text-gray-300 relative"> <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 3h18M3 12h18M3 21h18"/></svg> <span class="absolute -top-1 -right-1 bg-red-500 text-white rounded-full h-5 w-5 flex items-center justify-center text-xs">0</span> </a> <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="ml-4 rounded-full h-10 w-10"> </div> <button class="md:hidden text-gray-700 dark:text-gray-300 focus:outline-none"> <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 12h16m-7 6h7"/></svg> </button></nav>Composants associés
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)
Composant Composants de navigation
Une barre de navigation réactive avec prise en charge du mode sombre.
RetroPortfolioNavigation
Composant de navigation rétro/vintage pour portefeuille avec prise en charge de la palette de couleurs pastel, réactive et du mode sombre.