Composants de navigation
Un composant de navigation réactif suivant les principes de Material Design avec une palette de couleurs triadique, destiné aux interfaces de médias sociaux, avec prise en charge du mode sombre.
HTML Code
<nav class="bg-gray-100 dark:bg-gray-800 shadow-lg p-4 rounded-lg">
<div class="container mx-auto flex justify-between items-center">
<div class="flex items-center space-x-4">
<img src="https://picsum.photos/40" alt="Logo" class="rounded-full">
<h1 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Social Media</h1>
</div>
<ul class="flex space-x-6">
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition">Home</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition">Profile</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition">Messages</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition">Settings</a></li>
</ul>
<div class="relative">
<img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar" class="rounded-full w-8 h-8">
<div class="absolute right-0 w-2 h-2 bg-green-500 rounded-full ring-2 ring-white dark:ring-gray-800"></div>
</div>
</div>
</nav>
<div class="container mx-auto mt-6">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200">Feed</h2>
<div class="mt-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-white dark:bg-gray-900 p-4 rounded-lg shadow-md">
<img src="https://picsum.photos/300/200" alt="Post Image" class="w-full h-40 object-cover rounded-lg">
<h3 class="font-semibold text-gray-800 dark:text-gray-200 mt-2">Post Title</h3>
<p class="text-gray-600 dark:text-gray-400">This is a short description of the post content.</p>
</div>
<div class="bg-white dark:bg-gray-900 p-4 rounded-lg shadow-md">
<img src="https://picsum.photos/300/201" alt="Post Image" class="w-full h-40 object-cover rounded-lg">
<h3 class="font-semibold text-gray-800 dark:text-gray-200 mt-2">Post Title</h3>
<p class="text-gray-600 dark:text-gray-400">This is a short description of the post content.</p>
</div>
<div class="bg-white dark:bg-gray-900 p-4 rounded-lg shadow-md">
<img src="https://picsum.photos/300/202" alt="Post Image" class="w-full h-40 object-cover rounded-lg">
<h3 class="font-semibold text-gray-800 dark:text-gray-200 mt-2">Post Title</h3>
<p class="text-gray-600 dark:text-gray-400">This is a short description of the post content.</p>
</div>
</div>
</div>Composants associés
Navigation skeuomorphe
Un composant de navigation simple et réactif avec un design skeuomorphique, une palette de couleurs analogue adaptée aux applications de médias sociaux, avec prise en charge du thème sombre.
Composants de navigation
Une barre de navigation en mode sombre avec un design réactif, avec un logo, un avatar et des liens pour la navigation.
Composants de navigation
Un composant de navigation conçu avec un style brutaliste, avec une palette de couleurs pastel pour les interfaces de médias sociaux, avec une mise en page réactive et une prise en charge du thème sombre.