Composant d’amélioration de la navigation
Un composant de navigation réactif conçu pour le mode sombre avec Tailwind CSS, avec des espaces réservés pour les logos, les images et les avatars.
HTML Code
<nav class="bg-gray-900 text-white p-4 shadow-lg">
<div class="container mx-auto flex justify-between items-center">
<div class="flex items-center">
<img src="https://picsum.photos/50" alt="Logo" class="mr-3 rounded-full">
<span class="text-xl font-bold">MyApp</span>
</div>
<div class="hidden md:flex space-x-4">
<a href="#" class="hover:text-gray-300">Home</a>
<a href="#" class="hover:text-gray-300">About</a>
<a href="#" class="hover:text-gray-300">Services</a>
<a href="#" class="hover:text-gray-300">Contact</a>
</div>
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border border-gray-700">
<button class="ml-4 p-2 bg-gray-700 rounded hover:bg-gray-600 focus:outline-none">Menu</button>
</div>
</div>
</nav>
<div class="bg-gray-800 text-white p-4">
<div class="container mx-auto flex flex-col md:flex-row md:justify-between">
<div class="flex items-center mb-4 md:mb-0">
<img src="https://picsum.photos/100/100" alt="Placeholder Image" class="rounded-lg">
<p class="ml-4">This is a simple navigation enhancement component in dark mode.</p>
</div>
<div class="flex space-x-4">
<a href="#" class="bg-gray-700 px-4 py-2 rounded hover:bg-gray-600">Action 1</a>
<a href="#" class="bg-gray-700 px-4 py-2 rounded hover:bg-gray-600">Action 2</a>
</div>
</div>
</div>
<style>
@media (prefers-color-scheme: dark) {
body {
background-color: #1a202c;
color: #fff;
}
}
</style>Composants associés
E-commerce Navigation industrielle
Un composant complexe de navigation e-commerce de style industriel avec des matériaux bruts et des éléments apparents esthétiques. Dispose d’un schéma monochrome en noir et blanc avec un accent brillant, entièrement réactif avec prise en charge du mode sombre.
Nature-Inspired_Entertainment_Navigation
Un composant de navigation complexe, inspiré de la nature, pour les plateformes de divertissement et de médias, avec des lignes fluides et des combinaisons de couleurs sucrées. Entièrement réactif avec prise en charge du mode sombre.
Composant Composants d’amélioration de la navigation
Un composant de navigation réactif avec prise en charge du mode sombre pour les sites Web de commerce électronique. Il présente une palette de couleurs triadique avec un fond sombre pour réduire la fatigue oculaire.