Componente di navigazione dei social media
Un componente di navigazione reattivo progettato per le interfacce dei social media, caratterizzato da un'estetica Material Design che utilizza un tema scuro con Tailwind CSS.
Codice HTML
<nav class="bg-gray-800 dark:bg-gray-900 p-4 shadow-lg">
<div class="flex items-center justify-between">
<a href="#" class="text-white text-lg font-semibold">Logo</a>
<div class="hidden md:flex space-x-4">
<a href="#" class="text-gray-300 hover:text-white">Home</a>
<a href="#" class="text-gray-300 hover:text-white">Explore</a>
<a href="#" class="text-gray-300 hover:text-white">Notifications</a>
<a href="#" class="text-gray-300 hover:text-white">Messages</a>
<a href="#" class="text-gray-300 hover:text-white">Profile</a>
</div>
<div class="md:hidden">
<button class="text-gray-300 hover:text-white focus:outline-none" aria-label="Menu">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
</svg>
</button>
</div>
</div>
<div class="mt-4 md:hidden">
<a href="#" class="block text-gray-300 hover:text-white">Home</a>
<a href="#" class="block text-gray-300 hover:text-white">Explore</a>
<a href="#" class="block text-gray-300 hover:text-white">Notifications</a>
<a href="#" class="block text-gray-300 hover:text-white">Messages</a>
<a href="#" class="block text-gray-300 hover:text-white">Profile</a>
</div>
</nav>
<div class="bg-gray-700 dark:bg-gray-800 p-4 rounded-lg shadow-md mt-4">
<h2 class="text-white text-lg font-semibold">Friends</h2>
<div class="flex space-x-4 mt-2">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
<span class="text-gray-300 ml-2">User 1</span>
</div>
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/women/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
<span class="text-gray-300 ml-2">User 2</span>
</div>
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/33.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
<span class="text-gray-300 ml-2">User 3</span>
</div>
</div>
</div>
<div class="bg-gray-700 dark:bg-gray-800 p-4 rounded-lg shadow-md mt-4">
<h2 class="text-white text-lg font-semibold">Trending Posts</h2>
<div class="flex flex-col space-y-4 mt-2">
<div class="flex space-x-2">
<img src="https://picsum.photos/50/50" alt="Post Image" class="rounded-lg">
<div>
<p class="text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<span class="text-gray-500 text-sm">3 hours ago</span>
</div>
</div>
<div class="flex space-x-2">
<img src="https://picsum.photos/50/50?random=1" alt="Post Image" class="rounded-lg">
<div>
<p class="text-gray-300">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<span class="text-gray-500 text-sm">5 hours ago</span>
</div>
</div>
</div>
</div>\n<div class="bg-gray-700 dark:bg-gray-800 p-4 rounded-lg shadow-md mt-4">
<h2 class="text-white text-lg font-semibold">Explore More</h2>
<ul class="mt-2 space-y-1">
<li><a href="#" class="text-gray-300 hover:text-white">#Nature</a></li>
<li><a href="#" class="text-gray-300 hover:text-white">#Travel</a></li>
<li><a href="#" class="text-gray-300 hover:text-white">#Food</a></li>
<li><a href="#" class="text-gray-300 hover:text-white">#Technology</a></li>
<li><a href="#" class="text-gray-300 hover:text-white">#Lifestyle</a></li>
</ul>
</div>Componenti correlati
Componente di navigazione skeuomorfa
Un componente di navigazione scheumorfico progettato per imitare elementi del mondo reale come un pannello di controllo fisico o un cruscotto. Presenta un design reattivo, effetti al passaggio del mouse che simulano la pressione fisica dei pulsanti e supporto per temi scuri. La navigazione include ombre sottili, sfumature e texture per creare un aspetto tattile 3D che ricorda le interfacce fisiche.
Componente di navigazione
Un semplice componente di navigazione progettato per un blog con microinterazioni e combinazione di colori pastello. È dotato di un layout reattivo e supporto per temi scuri.
Componente di navigazione 3D
Un componente di navigazione 3D reattivo progettato per l'e-commerce, con una combinazione di colori in scala di grigi e supporto per la modalità scura.