Barre de navigation skeuomorphe
Une barre de navigation simple et réactive pour les médias sociaux avec un style de conception skeuomorphe, utilisant une palette de couleurs analogue et prenant en charge le mode sombre.
HTML Code
<nav class="bg-gray-200 dark:bg-gray-800 p-4 shadow-lg rounded-lg">
<div class="container mx-auto flex justify-between items-center">
<div class="flex items-center">
<img src="https://picsum.photos/40/40" alt="Logo" class="rounded-full mr-2">
<span class="text-xl font-semibold text-gray-800 dark:text-gray-200">SocialApp</span>
</div>
<ul class="flex space-x-4">
<li><a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 transition-colors">Home</a></li>
<li><a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 transition-colors">About</a></li>
<li><a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 transition-colors">Contact</a></li>
<li><a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 transition-colors">Profile</a></li>
</ul>
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="rounded-full w-10 h-10 border-2 border-gray-300 dark:border-gray-600">
</div>
</div>
</nav>Composants associés
Composant de la barre de navigation
Une barre de navigation réactive pour un site Web de commerce électronique, avec un style de conception glassmorphism avec une palette de couleurs en niveaux de gris et la prise en charge du mode sombre à l’aide de Tailwind CSS.
Barre de navigation du blog
Barre de navigation réactive avec prise en charge du mode sombre pour les sites Web de blog/contenu. Dispose d’un design minimaliste / plat avec une palette de couleurs pastel.
Barre de navigation des médias sociaux
Glassmorphism Grayscale Composant simple de la barre de navigation des médias sociaux