Composant de navigation
Un composant de navigation réactif conçu pour l’interface utilisateur en mode sombre, avec des liens, des listes déroulantes et un logo, le tout stylisé avec Tailwind CSS.
HTML Code
<nav class="bg-gray-800 p-4 fixed w-full">
<div class="flex justify-between items-center">
<div class="text-white text-lg font-bold">
<a href="#" class="flex items-center">
<img src="https://picsum.photos/40" alt="Logo" class="mr-2 rounded-full">
MyApp
</a>
</div>
<div class="hidden md:flex space-x-4">
<a href="#" class="text-gray-300 hover:bg-gray-700 px-3 py-2 rounded">Home</a>
<a href="#" class="text-gray-300 hover:bg-gray-700 px-3 py-2 rounded">About</a>
<div class="relative">
<button class="text-gray-300 hover:bg-gray-700 px-3 py-2 rounded flex items-center">Services
<svg class="w-4 h-4 ml-1" 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="M5 15l7-7 7 7"/>
</svg>
</button>
<div class="absolute left-0 hidden bg-gray-800 text-white mt-1 rounded shadow-md w-40">
<a href="#" class="block px-4 py-2 hover:bg-gray-700">Web Design</a>
<a href="#" class="block px-4 py-2 hover:bg-gray-700">SEO</a>
<a href="#" class="block px-4 py-2 hover:bg-gray-700">Marketing</a>
</div>
</div>
<a href="#" class="text-gray-300 hover:bg-gray-700 px-3 py-2 rounded">Contact</a>
</div>
<div class="md:hidden">
<button class="text-gray-300 hover:bg-gray-700 px-3 py-2 rounded 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-7 6h7"/>
</svg>
</button>
</div>
</div>
</nav>
<div class="mt-16 p-4">
<h1 class="text-3xl text-white">Welcome to MyApp</h1>
<p class="text-gray-300">This is an example of a dark mode navigation component using Tailwind CSS.</p>
</div>
<style>
.dropdown:hover .dropdown-content {
display: block;
}
</style>Composants associés
Luxury_SaaS_Navigation_Candy
Un composant de navigation de style luxe/premium pour les applications SaaS, avec une palette de couleurs sur le thème des bonbons (rose bonbon, vert menthe) et une typographie sophistiquée. Il est réactif, inclut la prise en charge du mode sombre et comporte des éléments interactifs.
Barre de navigation dégradée vitreuse
Cette barre de navigation présente un design moderne et vitreux, combinant des couleurs dégradées et un effet de verre dépoli pour maintenir un effet translucide lors du défilement.
Navigation Monospace pour le secteur de la santé
Il s’agit d’un composant de navigation complexe et réactif pour les applications médicales/de santé, doté d’un design inspiré du monospace/développeur avec des neutres chauds, la prise en charge du mode sombre et des éléments interactifs.