Componente di navigazione permanente
Una barra di navigazione appiccicosa complessa e scheumorfica con colori vivaci, progettata per le interfacce dei social media. Include un design reattivo e il supporto per la modalità oscura utilizzando Tailwind CSS. Presenta l'immagine del profilo, la barra di ricerca, le notifiche e le icone di messaggistica.
Codice HTML
<nav class="sticky top-0 bg-gradient-to-b from-blue-500 to-purple-600 dark:from-gray-800 dark:to-gray-900 p-4 shadow-lg z-50">
<div class="container mx-auto flex items-center justify-between">
<!-- Profile Pic and Site Title -->
<div class="flex items-center">
<img class="h-10 w-10 rounded-full border-2 border-white mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profile Picture">
<span class="text-white text-2xl font-bold drop-shadow-md">SocialNet</span>
</div>
<!-- Search Bar -->
<div class="flex-grow mx-5">
<input type="text" placeholder="Search..." class="w-full px-4 py-2 rounded-full bg-white bg-opacity-30 text-white placeholder-white::placeholder focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50 dark:bg-gray-700 dark:bg-opacity-50 dark:placeholder-gray-300">
</div>
<!-- Icons -->
<div class="flex items-center space-x-6">
<a href="#" class="text-white hover:scale-110 transition-transform duration-200">
<svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<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 11-6 0v-1m6 0H9"/>
</svg>
</a>
<a href="#" class="text-white hover:scale-110 transition-transform duration-200">
<svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-.55.55c-.18.18-.42.29-.67.29H9v-.54l-.55-.55z"/>
</svg>
</a>
</div>
</div>
</nav>Componenti correlati
Componente di navigazione permanente
Un componente di navigazione appiccicoso progettato in uno stile scheumorfico, che mostra colori complementari, adatto a un portfolio con un'interfaccia ricca.
Navigazione appiccicosa retrò per l'e-commerce
Un componente di navigazione appiccicosa retrò/vintage per siti di e-commerce con colori vivaci, elementi complessi, reattività e supporto per la modalità oscura utilizzando Tailwind CSS.
Componente di navigazione permanente
Un componente di navigazione appiccicoso per l'e-commerce, caratterizzato da un design minimalista/piatto con colori vivaci. Include un logo, una barra di ricerca, un'icona del carrello e un avatar dell'utente, il tutto con Tailwind CSS per la reattività e il supporto del tema scuro.