Componente di navigazione permanente
Una barra di navigazione appiccicosa pulita, affidabile e reattiva progettata con una combinazione di colori pastello per uso aziendale/professionale, adatta per applicazioni meteorologiche/climatiche. Include il supporto per la modalità oscura.
Codice HTML
<header class="w-full sticky top-0 z-50 shadow-md bg-white dark:bg-gray-800 transition-colors duration-300">
<nav class="container mx-auto px-4 py-3 flex items-center justify-between">
<div class="flex items-center space-x-2">
<svg class="h-8 w-8 text-blue-400 dark:text-blue-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15a4 4 0 004 4h9a5 5 0 005-5V7a4 4 0 00-4-4H9a5 5 0 00-5 5v2.5a.5.5 0 01-1 0V8a7 7 0 017-7h7a7 7 0 017 7v7a7 7 0 01-7 7h-7a7 7 0 01-7-7v-2.5a.5.5 0 011 0V15z" />
</svg>
<span class="text-xl font-semibold text-gray-800 dark:text-gray-100">WeatherCentral</span>
</div>
<ul class="hidden md:flex space-x-6">
<li><a href="#home" class="text-gray-600 hover:text-blue-500 dark:text-gray-300 dark:hover:text-blue-400 font-medium transition-colors duration-200">Home</a></li>
<li><a href="#forecast" class="text-gray-600 hover:text-blue-500 dark:text-gray-300 dark:hover:text-blue-400 font-medium transition-colors duration-200">Forecast</a></li>
<li><a href="#climate" class="text-gray-600 hover:text-blue-500 dark:text-gray-300 dark:hover:text-blue-400 font-medium transition-colors duration-200">Climate Data</a></li>
<li><a href="#maps" class="text-gray-600 hover:text-blue-500 dark:text-gray-300 dark:hover:text-blue-400 font-medium transition-colors duration-200">Maps</a></li>
<li><a href="#about" class="text-gray-600 hover:text-blue-500 dark:text-gray-300 dark:hover:text-blue-400 font-medium transition-colors duration-200">About</a></li>
</ul>
<button class="md:hidden focus:outline-none" aria-label="Toggle menu">
<svg class="w-7 h-7 text-gray-600 dark:text-gray-300" 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>
</button>
</nav>
<!-- Mobile Menu (hidden by default, would be toggled with JS) -->
<div class="md:hidden bg-white dark:bg-gray-800 border-t border-gray-100 dark:border-gray-700 py-2 hidden" id="mobile-menu">
<ul class="flex flex-col space-y-2 px-4">
<li><a href="#home" class="block text-gray-700 hover:text-blue-500 dark:text-gray-200 dark:hover:text-blue-400 py-2">Home</a></li>
<li><a href="#forecast" class="block text-gray-700 hover:text-blue-500 dark:text-gray-200 dark:hover:text-blue-400 py-2">Forecast</a></li>
<li><a href="#climate" class="block text-gray-700 hover:text-blue-500 dark:text-gray-200 dark:hover:text-blue-400 py-2">Climate Data</a></li>
<li><a href="#maps" class="block text-gray-700 hover:text-blue-500 dark:text-gray-200 dark:hover:text-blue-400 py-2">Maps</a></li>
<li><a href="#about" class="block text-gray-700 hover:text-blue-500 dark:text-gray-200 dark:hover:text-blue-400 py-2">About</a></li>
</ul>
</div>
</header>Componenti correlati
Componente di navigazione permanente
Una barra di navigazione appiccicosa minimalista e reattiva per i blog, caratterizzata da una combinazione di colori vivaci. Supporta la modalità oscura e ha un layout semplice e pulito con "Titolo del blog" a sinistra e collegamenti di navigazione a destra. La barra di navigazione si blocca nella parte superiore del riquadro di visualizzazione quando l'utente scorre.
Componente di navigazione permanente - Neumorfismo
Un componente di navigazione appiccicosa reattivo con design a nemorfismo, combinazione di colori complementari e supporto per temi scuri, adatto per un sito Web di portfolio. Utilizza Tailwind CSS con le classi della modalità scura e include ombre sottili per l'effetto Neumorfismo.
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.