Composant de la barre de navigation 47
Une barre de navigation réactive avec un style de conception 3D, incorporant de la profondeur et de l’engagement, prenant en charge le thème sombre.
HTML Code
<nav class="bg-white dark:bg-gray-900 shadow-lg rounded-lg p-6">
<div class="flex justify-between items-center">
<div class="flex items-center">
<img src="https://picsum.photos/40" alt="Logo" class="rounded-full mr-3 shadow-md">
<h1 class="text-xl font-bold text-gray-800 dark:text-gray-100">My Website</h1>
</div>
<div class="hidden md:flex space-x-6">
<a href="#" class="text-gray-800 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400 transition duration-200">Home</a>
<a href="#" class="text-gray-800 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400 transition duration-200">About</a>
<a href="#" class="text-gray-800 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400 transition duration-200">Services</a>
<a href="#" class="text-gray-800 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400 transition duration-200">Contact</a>
</div>
<div class="md:hidden">
<button class="text-gray-800 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400 transition duration-200">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M3 6h14M3 10h14m-7 4h7" clip-rule="evenodd" /></svg>
</button>
</div>
</div>
<div class="mt-4 md:hidden space-x-4">
<a href="#" class="block text-gray-800 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400 transition duration-200">Home</a>
<a href="#" class="block text-gray-800 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400 transition duration-200">About</a>
<a href="#" class="block text-gray-800 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400 transition duration-200">Services</a>
<a href="#" class="block text-gray-800 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400 transition duration-200">Contact</a>
</div>
</nav>
Composants associés
Composant de la barre de navigation
Une barre de navigation réactive pour un tableau de bord, avec un thème en mode sombre avec des tons de terre. Comprend un logo, des liens de navigation, une barre de recherche et une section de profil utilisateur. Conçu pour une complexité modérée avec des éléments interactifs.
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.
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.