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
Social-Media-Glassmorphism-Navbar
Barra di navigazione dei social media Glassmorphism reattivo con modalità scura
Componente della barra di navigazione
Un semplice componente della barra di navigazione reattivo progettato per una dashboard, caratterizzato da una combinazione di colori monocromatica e microinterazioni. Include un supporto per la modalità oscura con effetti al passaggio del mouse per animazioni coinvolgenti.
Componente della barra di navigazione
Un componente della barra di navigazione reattivo progettato in stile Material Design con combinazione di colori triadica, adatto per le interfacce dei social media e include il supporto per il tema scuro.