Composant Composants de navigation
Glassmorphism Monochromatique Modéré Composant de navigation e-commerce avec prise en charge du mode sombre
HTML Code
<nav class="p-4 backdrop-filter backdrop-blur-lg bg-opacity-20 bg-gray-100 dark:bg-gray-800 dark:bg-opacity-20 text-gray-800 dark:text-white shadow-lg">
<div class="container mx-auto flex flex-wrap items-center justify-between">
<!-- Logo or Brand Name -->
<a href="#" class="text-xl font-bold p-2">ShopSphere</a>
<!-- Mobile Menu Button -->
<button class="lg:hidden p-2 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-300">
<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 12h16m-4 6h4"></path>
</svg>
</button>
<!-- Navigation Links -->
<div class="hidden lg:flex flex-grow items-center justify-center" id="navbar-collapse">
<ul class="flex flex-col lg:flex-row gap-1 lg:gap-4">
<li><a href="#" class="block p-2 hover:bg-white hover:bg-opacity-30 rounded-md transition duration-300">Home</a></li>
<li><a href="#" class="block p-2 hover:bg-white hover:bg-opacity-30 rounded-md transition duration-300">Products</a></li>
<li><a href="#" class="block p-2 hover:bg-white hover:bg-opacity-30 rounded-md transition duration-300">Categories</a></li>
<li><a href="#" class="block p-2 hover:bg-white hover:bg-opacity-30 rounded-md transition duration-300">About Us</a></li>
<li><a href="#" class="block p-2 hover:bg-white hover:bg-opacity-30 rounded-md transition duration-300">Contact</a></li>
</ul>
</div>
<!-- Search and Cart Icons -->
<div class="flex items-center gap-2 p-2">
<a href="#" class="p-2 hover:bg-white hover:bg-opacity-30 rounded-md transition duration-300">
<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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
</a>
<a href="#" class="p-2 hover:bg-white hover:bg-opacity-30 rounded-md transition duration-300 relative">
<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="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 bg-red-600 rounded-full">3</span>
</a>
</div>
</div>
</nav>Composants associés
Composants de navigation
Un composant de navigation conçu avec un style brutaliste, avec une palette de couleurs pastel pour les interfaces de médias sociaux, avec une mise en page réactive et une prise en charge du thème sombre.
Navigation brutaliste sur les réseaux sociaux
Un composant de navigation réactif conçu dans un style brutaliste pour les applications de médias sociaux, utilisant une palette de couleurs complémentaires et des éléments minimaux.
Composant Composants de navigation
Un composant de navigation réactif avec prise en charge du mode sombre à l’aide de Tailwind CSS. Il comprend un logo, des liens de navigation et un bouton d’appel à l’action.