Brutalista E-commerce Navigazione
Un componente di navigazione in stile brutalista per l'e-commerce, caratterizzato da una combinazione di colori in scala di grigi, layout complesso, reattività e supporto per la modalità oscura, costruito con Tailwind CSS.
Codice HTML
<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>
Componenti correlati
Componente di navigazione 3D
Un componente di navigazione 3D reattivo progettato con Tailwind CSS, con supporto per temi scuri ed elementi tridimensionali accattivanti.
Componente di navigazione Material Design
Un componente di navigazione Material Design semplice e reattivo per le interfacce dei social media che utilizza una combinazione di colori in scala di grigi. Presenta un layout pulito con logo, link di navigazione, barra di ricerca e avatar dell'utente. Include il supporto per la modalità oscura utilizzando il prefisso dark: di Tailwind.
3D_Candy_Finance_Navigation
Un componente di navigazione semplice e reattivo per applicazioni finanziarie/bancarie, caratterizzato da una combinazione di colori caramella/dolce e sottili elementi di design 3D, con supporto per la modalità oscura.