Componente di navigazione
Un componente di navigazione reattivo in modalità scura progettato per l'e-commerce con una combinazione di colori pastello e un layout semplice.
Codice HTML
<nav class="bg-gray-800 dark:bg-gray-900 p-4">
<div class="container mx-auto flex items-center justify-between">
<div class="flex items-center space-x-4">
<a href="#" class="text-pink-300 hover:text-pink-400 dark:text-pink-200 dark:hover:text-pink-300">Home</a>
<a href="#" class="text-pink-300 hover:text-pink-400 dark:text-pink-200 dark:hover:text-pink-300">Shop</a>
<a href="#" class="text-pink-300 hover:text-pink-400 dark:text-pink-200 dark:hover:text-pink-300">About Us</a>
<a href="#" class="text-pink-300 hover:text-pink-400 dark:text-pink-200 dark:hover:text-pink-300">Contact</a>
</div>
<div class="flex items-center space-x-4">
<a href="#" class="text-pink-300 hover:text-pink-400 dark:text-pink-200 dark:hover:text-pink-300">
<img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
</a>
<a href="#" class="text-pink-300 hover:text-pink-400 dark:text-pink-200 dark:hover:text-pink-300">Cart</a>
</div>
</div>
</nav>Componenti correlati
Componente di navigazione Glassmorphism
Un componente di navigazione in stile glassmorphism per siti di e-commerce, con colori monocromatici, design reattivo e supporto per la modalità oscura utilizzando Tailwind CSS.
Componente di navigazione del neumorfismo
Componente di navigazione del neumorfismo ottimizzato per i siti web di portfolio. Presenta un layout complesso con più elementi interattivi, un design reattivo e il supporto della modalità oscura utilizzando Tailwind CSS. La combinazione di colori è analoga.
Componente di navigazione vintage retrò
Un componente di navigazione in stile retrò/vintage con una combinazione di colori monocromatica per un cruscotto. Include collegamenti e supporta la modalità oscura.