Barre de navigation en mode sombre
Composant de la barre de navigation avec effets réactifs et prise en charge du thème sombre.
HTML Code
<nav class="bg-gray-800 p-4 text-white">
<div class="container mx-auto flex items-center justify-between">
<div class="text-lg font-semibold">My Website</div>
<div class="hidden md:flex space-x-4">
<a href="#" class="hover:underline">Home</a>
<a href="#" class="hover:underline">About</a>
<a href="#" class="hover:underline">Services</a>
<a href="#" class="hover:underline">Contact</a>
</div>
<div class="md:hidden">
<button class="text-white focus:outline-none">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-4 6h4"></path>
</svg>
</button>
</div>
</div>
</nav>
Composants associés
Barre de navigation brutaliste
Une barre de navigation réactive conçue dans un style brutaliste avec des couleurs à haute saturation, pour la consommation de blogs et de contenu, avec prise en charge du thème sombre.
Barre de navigation rétro/vintage pour les réseaux sociaux
Barre de navigation rétro/vintage pour les médias sociaux avec une palette de couleurs analogue, une complexité simple, une prise en charge réactive et un thème sombre.
Barre de navigation
Composant de barre de navigation réactive en mode sombre à l’aide de Tailwind CSS