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
Una barra di navigazione semplice, reattiva e appiccicosa adatta a un marketplace, con una combinazione di colori analoga e il supporto della modalità scura. Include microinterazioni sottili al passaggio del mouse.
Componente di navigazione permanente
Componente di navigazione appiccicosa con stile Glassmorphism, effetti reattivi e supporto per temi scuri utilizzando Tailwind CSS.
Componente di navigazione permanente
Una barra di navigazione appiccicosa pulita, affidabile e semplice, adatta per siti Web aziendali ed eventi. Presenta monocromatico in bianco e nero con un colore d'accento brillante, piena reattività e supporto per la modalità scura.