Componente di navigazione permanente
Barra di navigazione appiccicosa minimalista e reattiva per un sito Web meteo/clima, con colori neutri freddi, supporto per la modalità oscura ed elementi interattivi. Progettato per una complessità media con collegamenti funzionali e una barra di ricerca.
Codice HTML
<header class="sticky top-0 z-50 bg-white shadow-sm dark:bg-gray-900 transition-colors duration-300 ease-in-out">
<nav class="container mx-auto px-4 py-3 flex items-center justify-between flex-wrap gap-4">
<a href="#" class="text-2xl font-bold text-gray-800 dark:text-gray-100 whitespace-nowrap tracking-tight transition-colors duration-300 ease-in-out">
Weather<span class="text-blue-600 dark:text-blue-400">Sphere</span>
</a>
<div class="flex items-center gap-4 order-3 md:order-none">
<div class="relative flex items-center">
<input type="search" placeholder="Search city..." class="py-2 pl-10 pr-3 rounded-full bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-300 ease-in-out w-full max-w-xs md:max-w-none">
<svg class="absolute left-3 text-gray-500 dark:text-gray-400 w-5 h-5" 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>
</div>
<button type="button" class="p-2 rounded-full text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors duration-300 ease-in-out">
<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="M12 3v1m0 16v1m9-9h1M3 12h1m15.325-7.757l-.707-.707M4.343 19.343l-.707-.707m13.414 0l.707-.707M4.343 4.343l-.707-.707"></path>
</svg>
</button>
</div>
<input type="checkbox" id="menu-toggle" class="hidden peer">
<label for="menu-toggle" class="cursor-pointer md:hidden text-gray-600 dark:text-gray-300 p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-300 ease-in-out order-2">
<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 12h16M4 18h16"></path>
</svg>
</label>
<div class="hidden peer-checked:block md:flex flex-col md:flex-row md:items-center gap-x-6 gap-y-2 w-full md:w-auto mt-4 md:mt-0 pb-2 md:pb-0 border-t md:border-t-0 border-gray-200 dark:border-gray-700 order-last md:order-none transition-all duration-300 ease-in-out" id="navbar-links">
<a href="#" class="block py-2 px-3 text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors duration-300 ease-in-out">
Dashboard
</a>
<a href="#" class="block py-2 px-3 text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors duration-300 ease-in-out">
Forecast
</a>
<a href="#" class="block py-2 px-3 text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors duration-300 ease-in-out">
Climate Data
</a>
<a href="#" class="block py-2 px-3 text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors duration-300 ease-in-out">
Maps
</a>
<a href="#" class="block py-2 px-3 text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors duration-300 ease-in-out">
About
</a>
</div>
</nav>
</header>Componenti correlati
Componente di navigazione permanente
Un componente di navigazione appiccicoso con design del neumorfismo, combinazione di colori complementari, complessità moderata e supporto del tema scuro reattivo per una dashboard. Il design incorpora ombre morbide per l'effetto Neumorfismo e utilizza colori complementari per creare un'interfaccia visivamente accattivante. È adatto per una dashboard che fornisce visualizzazione dei dati e pannelli di controllo.
Componente di navigazione permanente
Un componente di navigazione appiccicoso per l'e-commerce, caratterizzato da un design minimalista/piatto con colori vivaci. Include un logo, una barra di ricerca, un'icona del carrello e un avatar dell'utente, il tutto con Tailwind CSS per la reattività e il supporto del tema scuro.
Componente di navigazione permanente
Una barra di navigazione appiccicosa semplice, pulita e ad alto contrasto con un'estetica monospace/developer, adatta per piattaforme di intrattenimento o multimediali.