Barra di navigazione skeuomorphic
Una semplice barra di navigazione reattiva per i social media con uno stile di design scheumorfico, che utilizza una combinazione di colori analoga e supporta la modalità scura.
Codice HTML
<nav class="bg-gray-200 dark:bg-gray-800 p-4 shadow-lg rounded-lg">
<div class="container mx-auto flex justify-between items-center">
<div class="flex items-center">
<img src="https://picsum.photos/40/40" alt="Logo" class="rounded-full mr-2">
<span class="text-xl font-semibold text-gray-800 dark:text-gray-200">SocialApp</span>
</div>
<ul class="flex space-x-4">
<li><a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 transition-colors">Home</a></li>
<li><a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 transition-colors">About</a></li>
<li><a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 transition-colors">Contact</a></li>
<li><a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 transition-colors">Profile</a></li>
</ul>
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="rounded-full w-10 h-10 border-2 border-gray-300 dark:border-gray-600">
</div>
</div>
</nav>Componenti correlati
Cyberpunk_Retro_Food_Navbar
Una barra di navigazione semplice e reattiva con un'estetica cyberpunk-retrò, progettata per siti web di cibo/ristoranti. Presenta sfondo scuro, colori tenui e supporto per la modalità scura.
Social-Media-Glassmorphism-Navbar
Barra di navigazione dei social media Glassmorphism reattivo con modalità scura
Componente della barra di navigazione
Una barra di navigazione reattiva con microinterazioni e supporto per la modalità oscura utilizzando Tailwind CSS.