Componenti di navigazione
Un componente di navigazione minimalista per un sito Web di e-commerce, con un logo, una barra di ricerca, collegamenti di navigazione, icona del carrello e avatar dell'utente utilizzando Tailwind CSS. Questo componente supporta il design reattivo e la modalità oscura.
Codice HTML
<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>Componenti correlati
Glassmorphism_Navigation_Simple_Sunset
Un componente di navigazione glassmorphism semplice e reattivo con toni caldi e sunset, adatto per siti web aziendali/aziendali. Presenta elementi traslucidi e supporta la modalità scura.
Componente di navigazione skeuomorfa
Un componente di navigazione progettato con uno stile scheumorfico, caratterizzato da una combinazione di colori complementari, adatto per una dashboard con visualizzazione dei dati e pannelli di controllo. Include elementi interattivi per il coinvolgimento degli utenti.
Componente di navigazione del portfolio
Un componente di navigazione reattivo per un sito web portfolio, ispirato all'estetica della carta/stampa con toni caldi e del tramonto. Include il supporto per la modalità oscura e un layout pulito adatto per mostrare il lavoro.