Barra di navigazione dei social media skeuomorfa
Barra di navigazione dei social media scheumorfa con combinazione di colori triadica e complessità moderata.
Codice HTML
<nav class="bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-900 shadow-lg dark:shadow-[0_20px_50px_rgba(0,_0,_0,_0.6)] p-4 rounded-b-xl">
<div class="container mx-auto flex items-center justify-between">
<div class="flex items-center space-x-4">
<a href="#" class="flex items-center space-x-2 text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300">
<svg class="h-8 w-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m0 0l7 7m-2.343 2.343a1 1 0 01-1.414 0L11.5 11.5m-4 4L7 10m3.75 3.75V17m-5 0h5"></path></svg>
<span class="font-bold text-xl">SocialApp</span>
</a>
</div>
<div class="flex items-center space-x-6">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-green-600 dark:hover:text-green-400 transition duration-300 relative">
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 01-6 0v-1m6 0H9"></path></svg>
<span class="absolute top-0 right-0 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-red-100 transform translate-x-1/2 -translate-y-1/2 bg-red-600 rounded-full">3</span>
</a>
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 transition duration-300">
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.004 9.004 0 01-7.504-4.588M3.05 5.84C3.05 5.84 6.893 19 12 19s8.95-13.16 8.95-13.16"></path></svg>
</a>
<div class="relative">
<button class="relative z-10 block h-10 w-10 rounded-full overflow-hidden border-2 border-gray-400 dark:border-gray-600 focus:outline-none focus:border-white">
<img class="h-full w-full object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Your avatar">
</button>
</div>
</div>
</div>
</nav>Componenti correlati
Barra di navigazione skeuomorphic
Un componente della barra di navigazione del portfolio progettato con stili scheumorfici e una combinazione di colori pastello, incluso il supporto per la modalità scura. Presenta elementi interattivi come link e un menu a discesa.
Transizioni gradiente/colore Barra di navigazione del cruscotto in scala di grigi
Una barra di navigazione complessa e reattiva per una dashboard, con transizioni sfumate in una combinazione di colori in scala di grigi. Include più elementi interattivi e il supporto completo della modalità scura.
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.