Composants de navigation
Une barre de navigation en mode sombre avec un design réactif, avec un logo, un avatar et des liens pour la navigation.
HTML Code
<nav class="bg-gray-900 text-white p-4 flex justify-between items-center">
<div class="flex items-center space-x-4">
<img src="https://picsum.photos/50/50" alt="Logo" class="w-10 h-10 rounded-full">
<span class="text-xl font-semibold">My Website</span>
</div>
<div class="hidden md:flex space-x-4">
<a href="#" class="hover:text-gray-400 transition duration-200">Home</a>
<a href="#" class="hover:text-gray-400 transition duration-200">About</a>
<a href="#" class="hover:text-gray-400 transition duration-200">Services</a>
<a href="#" class="hover:text-gray-400 transition duration-200">Contact</a>
</div>
<div class="relative">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full cursor-pointer">
<div class="absolute right-0 mt-2 w-48 bg-gray-800 text-white rounded-md shadow-lg hidden group-hover:block">
<a href="#" class="block px-4 py-2 hover:bg-gray-700">Profile</a>
<a href="#" class="block px-4 py-2 hover:bg-gray-700">Settings</a>
<a href="#" class="block px-4 py-2 hover:bg-gray-700">Logout</a>
</div>
</div>
</nav>
<style>
@media (prefers-color-scheme: dark) {
body {
background-color: #1a1a1a;
}
}
</style>
Composants associés
Cyberpunk Météo Navigation
Un composant de navigation simple et réactif sur le thème du cyberpunk pour une application météo, avec des couleurs sourdes et des accents néon, avec prise en charge du mode sombre.
Composant de navigation dans les médias sociaux
Un composant de navigation simple et réactif pour les applications de médias sociaux, avec un thème sombre et une palette de couleurs complémentaires inspirée de Material Design. Il comprend un logo, des liens de navigation et un avatar utilisateur.
Composante de navigation brutale
Un composant de navigation réactif conçu dans un style brutaliste, présentant une palette de couleurs monochromatiques, idéal pour un site Web de portfolio. Les caractéristiques incluent une mise en page audacieuse avec un contraste élevé, la prise en charge du mode sombre à l’aide de Tailwind CSS et des éléments interactifs tels que des listes déroulantes ou des liens de boutons.