Barre de navigation Composant 16
Un composant de barre de navigation minimaliste au design plat avec des effets réactifs et la prise en charge du thème sombre.
HTML Code
<nav class="bg-white dark:bg-gray-800 shadow-lg">
<div class="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex">
<div class="flex-shrink-0">
<a href="#" class="text-2xl font-bold text-gray-800 dark:text-white">Brand</a>
</div>
<div class="hidden md:flex md:space-x-8">
<a href="#" class="text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">Home</a>
<a href="#" class="text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">About</a>
<a href="#" class="text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">Services</a>
<a href="#" class="text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">Contact</a>
</div>
</div>
<div class="hidden md:flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="h-10 w-10 rounded-full border border-gray-300 dark:border-gray-700"
/>
</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-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800">
<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">
<a href="#" class="block text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-base font-medium">Home</a>
<a href="#" class="block text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-base font-medium">About</a>
<a href="#" class="block text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-base font-medium">Services</a>
<a href="#" class="block text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-base font-medium">Contact</a>
</div>
</nav>
Composants associés
Artsy_Neon_Crypto_Navbar
Une barre de navigation complexe et réactive pour les applications de crypto-monnaie/blockchain avec un design artistique inspiré de l’aquarelle et une palette de couleurs vives et néon. Comprend la prise en charge du mode sombre et des éléments interactifs.
Barre de navigation Art Déco
Une barre de navigation réactive, inspirée de l’Art Déco, pour les outils CRM/Business, avec des motifs géométriques, des tons de bijoux riches et la prise en charge du mode sombre. Conçu avec une complexité modérée, y compris des éléments interactifs.
Glassmorphism Barre de navigation du tableau de bord
Barre de navigation du tableau de bord complexe monochromatique Glassmorphism avec CSS Tailwind, prise en charge du thème réactif et sombre.