Navigation brutaliste dans le commerce électronique
Un composant de navigation de style brutaliste pour le commerce électronique, doté d’une palette de couleurs en niveaux de gris, d’une mise en page complexe, d’une réactivité et d’une prise en charge du mode sombre, construit avec Tailwind CSS.
HTML Code
<nav class="bg-gray-900 text-white dark:bg-black dark:text-gray-100 p-4">
<div class="container mx-auto flex flex-wrap items-center justify-between">
<div class="text-2xl font-bold uppercase border-2 border-white dark:border-gray-100 p-2">Store</div>
<div class="block lg:hidden">
<button id="menu-toggle" class="text-white dark:text-gray-100 focus:outline-none">
<svg class="h-6 w-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>
</div>
<div id="menu" class="w-full lg:flex lg:items-center lg:w-auto hidden lg:block mt-4 lg:mt-0">
<ul class="uppercase text-sm lg:flex-grow">
<li class="block mt-4 lg:inline-block lg:mt-0 mr-6"><a href="#" class="block py-2 px-4 hover:bg-white hover:text-black border-2 border-transparent hover:border-white">Home</a></li>
<li class="block mt-4 lg:inline-block lg:mt-0 mr-6"><a href="#" class="block py-2 px-4 hover:bg-white hover:text-black border-2 border-transparent hover:border-white">Shop</a></li>
<li class="block mt-4 lg:inline-block lg:mt-0 mr-6"><a href="#" class="block py-2 px-4 hover:bg-white hover:text-black border-2 border-transparent hover:border-white">Categories</a></li>
<li class="block mt-4 lg:inline-block lg:mt-0"><a href="#" class="block py-2 px-4 hover:bg-white hover:text-black border-2 border-transparent hover:border-white">Contact</a></li>
</ul>
<div class="flex items-center mt-4 lg:mt-0">
<input type="text" placeholder="Search" class="p-2 text-black dark:text-white bg-white dark:bg-gray-800 border-2 border-white dark:border-gray-100 mr-4">
<a href="#" class="block py-2 px-4 hover:bg-white hover:text-black border-2 border-transparent hover:border-white">Cart (0)</a>
</div>
</div>
</div>
</nav>
<script>
const menuToggle = document.getElementById('menu-toggle');
const menu = document.getElementById('menu');
menuToggle.addEventListener('click', () => {
menu.classList.toggle('hidden');
});
</script>Composants associés
Composant de navigation par neumorphisme
Composant de navigation Neumorphism optimisé pour les sites Web de portfolio. Il présente une mise en page complexe avec plusieurs éléments interactifs, un design réactif et une prise en charge du mode sombre à l’aide de Tailwind CSS. La palette de couleurs est analogue.
Composant de navigation rétro vintage
Un composant de navigation réactif conçu avec une esthétique rétro/vintage inspirée des styles des années 80/90, avec une palette de couleurs pastel. Convient aux interfaces de médias sociaux, y compris la prise en charge du mode sombre.
Bauhaus Météo Nav
Un composant de navigation réactif pour une application météo et climatique, doté d’un design inspiré du Bauhaus avec des formes géométriques, des couleurs sourdes et une prise en charge complète du mode sombre.