Componente della barra di navigazione
Una barra di navigazione reattiva per un sito di e-commerce, con uno stile di design glassmorphism con una combinazione di colori in scala di grigi e supporto per la modalità scura utilizzando Tailwind CSS.
Codice HTML
<nav class="bg-white bg-opacity-30 backdrop-blur-md dark:bg-gray-800 dark:bg-opacity-30 border-b border-gray-200 dark:border-gray-700 fixed w-full z-10">
<div class="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8">
<div class="relative flex items-center justify-between h-16">
<div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
<button class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 dark:text-gray-300 hover:text-gray-500 hover:dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-gray-500 dark:focus:ring-offset-gray-800" aria-controls="mobile-menu" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" 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>
</div>
<div class="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start">
<div class="flex-shrink-0">
<a href="#" class="text-2xl font-bold text-gray-800 dark:text-white">E-Shop</a>
</div>
<div class="hidden sm:block sm:ml-6">
<div class="flex space-x-4">
<a href="#" class="text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-700 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">Home</a>
<a href="#" class="text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-700 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">Products</a>
<a href="#" class="text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-700 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">About Us</a>
<a href="#" class="text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-700 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">Contact</a>
</div>
</div>
</div>
<div class="hidden sm:block">
<div class="flex items-center">
<a href="#" class="text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-700 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">Login</a>
<a href="#" class="text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-700 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">Cart</a>
</div>
</div>
</div>
</div>
</nav>
<div class="sm:hidden" id="mobile-menu">
<div class="px-2 pt-2 pb-3 space-y-1">
<a href="#" class="text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-700 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Home</a>
<a href="#" class="text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-700 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Products</a>
<a href="#" class="text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-700 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">About Us</a>
<a href="#" class="text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-700 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Contact</a>
<a href="#" class="text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-700 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Login</a>
<a href="#" class="text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-700 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Cart</a>
</div>
</div>Componenti correlati
Barra di navigazione del portfolio
Una barra di navigazione reattiva con supporto per temi scuri, progettata per un sito Web portfolio utilizzando i principi del Material Design e la combinazione di colori dei toni della terra. Include un logo del marchio, collegamenti di navigazione e un pulsante di invito all'azione. Il design è moderatamente complesso e si adatta a diverse dimensioni dello schermo.
Barra di navigazione skeuomorphic
Un componente della barra di navigazione reattivo progettato in uno stile scheumorfico con supporto per temi scuri utilizzando Tailwind CSS.
Componente della barra di navigazione
Una barra di navigazione reattiva per una dashboard, con un tema della modalità oscura con toni della terra. Include un logo, collegamenti di navigazione, una barra di ricerca e una sezione del profilo utente. Progettato per una complessità moderata con elementi interattivi.