Componente di navigazione
Un semplice componente di navigazione progettato per un blog con microinterazioni e combinazione di colori pastello. È dotato di un layout reattivo e supporto per temi scuri.
Codice HTML
<nav class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md transition-all duration-300">
<div class="container mx-auto flex justify-between items-center">
<div class="flex items-center space-x-4">
<img src="https://picsum.photos/30/30" alt="Logo" class="rounded-full">
<span class="text-xl font-semibold text-gray-800 dark:text-white">My Blog</span>
</div>
<ul class="flex space-x-6">
<li>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white transition-colors duration-300">Home</a>
</li>
<li>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white transition-colors duration-300">About</a>
</li>
<li>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white transition-colors duration-300">Blog</a>
</li>
<li>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white transition-colors duration-300">Contact</a>
</li>
</ul>
</div>
</nav>Componenti correlati
Componente di navigazione
Un componente di navigazione reattivo progettato per un portfolio, con microinterazioni e supporto per temi scuri.
Componente di navigazione vintage retrò
Un componente di navigazione reattivo progettato con un'estetica retrò/vintage ispirata agli stili degli anni '80/'90, caratterizzato da una combinazione di colori pastello. Adatto per le interfacce dei social media, incluso il supporto della modalità scura.
Componente di navigazione
Un componente di navigazione reattivo progettato per il consumo di blog/contenuti con uno stile di progettazione 3D, una combinazione di colori complementari e una complessità moderata che incorpora alcune funzionalità interattive.