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.
Codice HTML
<nav class="sticky top-0 z-10 bg-gray-200 dark:bg-gray-800 p-4 transition-all duration-300 ease-in-out shadow-neumorphism-light dark:shadow-neumorphism-dark">
<div class="container mx-auto flex justify-between items-center">
<div class="text-gray-800 dark:text-white text-lg font-bold">Your Logo</div>
<ul class="flex space-x-4">
<li>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out">Home</a>
</li>
<li>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out">About</a>
</li>
<li>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out">Portfolio</a>
</li>
<li>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out">Contact</a>
</li>
</ul>
</div>
</nav>
<style>
.shadow-neumorphism-light {
box-shadow: 7px 7px 15px #a7a7a7, -7px -7px 15px #ffffff;
}
.dark .shadow-neumorphism-dark {
box-shadow: 7px 7px 15px #1a1a1a, -7px -7px 15px #545454;
}
</style>Componenti correlati
Componente di navigazione permanente
Un componente di navigazione appiccicoso dal design piatto minimalista con una combinazione di colori monocromatica per siti Web aziendali/aziendali. Il design include più elementi interattivi e supporta il tema scuro.
Componente di navigazione permanente
Una barra di navigazione appiccicosa reattiva progettata con microinterazioni e una combinazione di colori triadica, adatta per blog e consumo di contenuti.
Componente di navigazione permanente - Modalità scura pastello
Una barra di navigazione appiccicosa progettata per la modalità scura, caratterizzata da un layout reattivo e accenti di colori pastello. La barra di navigazione rimane nella parte superiore del riquadro di visualizzazione mentre l'utente scorre, migliorando l'usabilità per le pagine con un contenuto elevato. Include segnaposto per un logo o un titolo del sito e link di navigazione, con stile CSS Tailwind per un look moderno e pulito.