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
Una barra di navigazione appiccicosa minimalista e reattiva per i blog, caratterizzata da una combinazione di colori vivaci. Supporta la modalità oscura e ha un layout semplice e pulito con "Titolo del blog" a sinistra e collegamenti di navigazione a destra. La barra di navigazione si blocca nella parte superiore del riquadro di visualizzazione quando l'utente scorre.
Componente di navigazione permanente - Modalità scura pastello
Una barra di navigazione appiccicosa progettata per la modalità scura, caratterizzata da un layout reattivo e accenti di colori pastello. La barra di navigazione rimane nella parte superiore del riquadro di visualizzazione mentre l'utente scorre, migliorando l'usabilità per le pagine con un contenuto elevato. Include segnaposto per un logo o un titolo del sito e link di navigazione, con stile CSS Tailwind per un look moderno e pulito.
Componente di navigazione permanente
Una barra di navigazione reattiva e appiccicosa con effetti neon/bagliore, adatta per piattaforme educative o di apprendimento. Presenta una combinazione di colori viola/viola, supporto per la modalità oscura e voci di menu interattive.