Componente di navigazione permanente
Un componente di navigazione appiccicoso con un design scheumorfico, una combinazione di colori triadici e un layout semplice, adatto per le interfacce dei social media. Supporta il design reattivo e il tema scuro.
Codice HTML
<nav class="fixed inset-x-0 top-0 bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-900 p-4 shadow-lg z-50 transform transition-transform duration-300 ease-in-out hover:-translate-y-1">
<div class="container mx-auto flex justify-between items-center">
<div class="flex items-center space-x-4">
<!-- Home Button - Blue/Cyan -->
<a href="#" class="flex items-center space-x-2 bg-gradient-to-br from-blue-500 to-cyan-400 text-white px-4 py-2 rounded-full shadow-md hover:shadow-lg transform hover:scale-105 transition duration-300 ease-in-out">
<svg class="w-5 h-5" 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-9v9a1 1 0 01-1 1h-3m-6 0v-9"></path></svg>
<span class="font-semibold hidden sm:inline">Home</span>
</a>
<!-- Notifications Button - Magenta/Pink -->
<a href="#" class="relative flex items-center space-x-2 bg-gradient-to-br from-fuchsia-600 to-pink-500 text-white px-4 py-2 rounded-full shadow-md hover:shadow-lg transform hover:scale-105 transition duration-300 ease-in-out">
<svg class="w-5 h-5" 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 11-6 0v-1m6 0H9"></path></svg>
<span class="font-semibold hidden sm:inline">Notifications</span>
<span class="absolute top-0 right-0 -mt-1 -mr-1 bg-red-600 text-white text-xs font-bold rounded-full w-5 h-5 flex items-center justify-center border-2 border-white dark:border-gray-800">3</span>
</a>
<!-- Messages Button - Yellow/Orange -->
<a href="#" class="relative flex items-center space-x-2 bg-gradient-to-br from-yellow-500 to-orange-400 text-white px-4 py-2 rounded-full shadow-md hover:shadow-lg transform hover:scale-105 transition duration-300 ease-in-out">
<svg class="w-5 h-5" 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 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-5 5v-5z"></path></svg>
<span class="font-semibold hidden sm:inline">Messages</span>
<span class="absolute top-0 right-0 -mt-1 -mr-1 bg-red-600 text-white text-xs font-bold rounded-full w-5 h-5 flex items-center justify-center border-2 border-white dark:border-gray-800">1</span>
</a>
</div>
<!-- User Avatar - Right side -->
<div class="relative">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-400 shadow-md transform hover:scale-110 transition duration-300 ease-in-out cursor-pointer">
<div class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-white dark:border-gray-800 -mb-1 -mr-1"></div>
</div>
</div>
</nav>
Componenti correlati
Componente di navigazione permanente
Componente di navigazione appiccicosa con stile Glassmorphism, effetti reattivi e supporto per temi scuri utilizzando Tailwind CSS.
Componente di navigazione permanente
Una barra di navigazione appiccicosa reattiva che segue le linee guida del Material Design, con una modalità scura.
Componente di navigazione permanente - Pastello neumorfico
Un componente di navigazione complesso e appiccicoso con uno stile di design del neumorfismo e una combinazione di colori pastello, adatto per la documentazione o i siti wiki. È dotato di elementi di navigazione nidificati, una barra di ricerca e il supporto per la modalità oscura, il tutto implementato con HTML e Tailwind CSS per una reattività completa.