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
Composant d’amélioration de la navigation
Un composant d’amélioration de la navigation conçu dans un style brutaliste. Avec des effets réactifs, la prise en charge du thème sombre et des images de remplacement.
Composants d’amélioration de la navigation
Un composant de navigation conçu en 3D avec une palette de couleurs analogue, une complexité modérée, adapté à la visualisation des données de tableau de bord et aux panneaux de contrôle.
Composants d’amélioration de la navigation
Un composant de navigation réactif avec une esthétique rétro/vintage, adapté aux applications de commerce électronique, avec prise en charge du thème sombre et interactivité modérée.