Composant Composants de navigation
Un composant de navigation réactif avec prise en charge du mode sombre à l’aide de Tailwind CSS. Il comprend un logo, des liens de navigation et un bouton d’appel à l’action.
HTML Code
<nav class="bg-gray-900 text-white">
<div class="container mx-auto px-6 py-4">
<div class="flex justify-between items-center">
<div class="flex items-center">
<svg class="w-8 h-8 fill-current text-white mr-2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path></svg>
<span class="text-xl font-bold">MyCompany</span>
</div>
<div class="hidden md:flex space-x-4">
<a href="#" class="hover:text-purple-400">Home</a>
<a href="#" class="hover:text-purple-400">About</a>
<a href="#" class="hover:text-purple-400">Services</a>
<a href="#" class="hover:text-purple-400">Contact</a>
</div>
<div class="hidden md:block">
<button class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-full">Get Started</button>
</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-7 6h7"></path></svg>
</button>
</div>
</div>
</div>
</nav>Composants associés
Composante de navigation 43
Un composant de navigation réactif suivant les principes de conception skeuomorphique, avec des éléments numériques qui imitent leurs homologues du monde réel, avec prise en charge du thème sombre.
Composant Composants de navigation
Une barre de navigation réactive avec prise en charge du mode sombre.
Composant de navigation minimaliste Earth Tones
Un composant de navigation minimaliste et plat avec une palette de couleurs terre, adapté aux sites Web de conseil/services. Il comprend une conception réactive pour les ordinateurs de bureau, les tablettes et les mobiles, et prend en charge le mode sombre.