Composant de la barre de navigation
Un composant de barre de navigation réactif conçu dans le style Material Design avec une palette de couleurs triadique, adapté aux interfaces de médias sociaux et incluant la prise en charge du thème sombre.
HTML Code
<nav class="bg-blue-600 dark:bg-gray-800 shadow-md">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex">
<div class="flex items-center">
<img src="https://picsum.photos/50" alt="Logo" class="h-8 w-8 rounded-full">
</div>
<div class="hidden md:flex items-center space-x-4 ml-6">
<a href="#" class="text-white dark:text-gray-300 hover:bg-blue-500 dark:hover:bg-gray-700 px-3 py-2 rounded-md text-sm font-medium">Home</a>
<a href="#" class="text-white dark:text-gray-300 hover:bg-blue-500 dark:hover:bg-gray-700 px-3 py-2 rounded-md text-sm font-medium">About</a>
<a href="#" class="text-white dark:text-gray-300 hover:bg-blue-500 dark:hover:bg-gray-700 px-3 py-2 rounded-md text-sm font-medium">Services</a>
<a href="#" class="text-white dark:text-gray-300 hover:bg-blue-500 dark:hover:bg-gray-700 px-3 py-2 rounded-md text-sm font-medium">Contact</a>
</div>
</div>
<div class="hidden md:flex items-center">
<a href="#" class="flex items-center text-gray-900 dark:text-gray-300 hover:bg-blue-500 dark:hover:bg-gray-700 px-3 py-2 rounded-md text-sm font-medium">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User avatar" class="h-8 w-8 rounded-full mr-2">
Profile
</a>
</div>
<div class="-mr-2 flex md:hidden">
<button class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-blue-500 dark:bg-gray-700 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" aria-controls="mobile-menu" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" 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>
<div class="md:hidden" id="mobile-menu">
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
<a href="#" class="text-white dark:text-gray-300 hover:bg-blue-500 dark:hover:bg-gray-700 block px-3 py-2 rounded-md text-base font-medium">Home</a>
<a href="#" class="text-white dark:text-gray-300 hover:bg-blue-500 dark:hover:bg-gray-700 block px-3 py-2 rounded-md text-base font-medium">About</a>
<a href="#" class="text-white dark:text-gray-300 hover:bg-blue-500 dark:hover:bg-gray-700 block px-3 py-2 rounded-md text-base font-medium">Services</a>
<a href="#" class="text-white dark:text-gray-300 hover:bg-blue-500 dark:hover:bg-gray-700 block px-3 py-2 rounded-md text-base font-medium">Contact</a>
</div>
</div>
</nav>
Composants associés
Barre de navigation en mode sombre
Composant de la barre de navigation avec effets réactifs et prise en charge du thème sombre.
Luxury_Premium_Dating_Social_NavBar
Une barre de navigation de style luxe/premium pour les plateformes de rencontres/sociales, avec une typographie élégante, une palette de couleurs à contraste élevé et un design réactif avec prise en charge du mode sombre. Comprend des éléments interactifs tels qu’un avatar de profil et une icône de notification.
Composant de la barre de navigation
Une barre de navigation réactive avec des micro-interactions et la prise en charge du mode sombre à l’aide de Tailwind CSS.