Composant de la barre latérale
Un composant de barre latérale réactif en mode sombre conçu à l’aide de Tailwind CSS, avec des arrière-plans sombres, des effets de survol et des espaces réservés pour les images et les avatars.
HTML Code
<div class="flex flex-col h-screen bg-gray-800 text-white p-4">
<div class="flex items-center mb-6">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
<h1 class="text-xl font-semibold">User Name</h1>
</div>
<nav class="flex-1">
<ul>
<li class="mb-4">
<a href="#" class="flex items-center p-2 rounded hover:bg-gray-700 transition duration-300">
<img src="https://picsum.photos/50/50" alt="Home Icon" class="w-6 h-6 mr-2">Home
</a>
</li>
<li class="mb-4">
<a href="#" class="flex items-center p-2 rounded hover:bg-gray-700 transition duration-300">
<img src="https://picsum.photos/50/50" alt="Profile Icon" class="w-6 h-6 mr-2">Profile
</a>
</li>
<li class="mb-4">
<a href="#" class="flex items-center p-2 rounded hover:bg-gray-700 transition duration-300">
<img src="https://picsum.photos/50/50" alt="Settings Icon" class="w-6 h-6 mr-2">Settings
</a>
</li>
<li class="mb-4">
<a href="#" class="flex items-center p-2 rounded hover:bg-gray-700 transition duration-300">
<img src="https://picsum.photos/50/50" alt="Logout Icon" class="w-6 h-6 mr-2">Logout
</a>
</li>
</ul>
</nav>
<footer>
<p class="text-gray-400 text-sm">© 2023 Your Company</p>
</footer>
</div>Composants associés
Barre latérale pastel skeuomorphe
Un composant de barre latérale simple et réactif avec un design Skeuomorphic et des couleurs pastel, adapté à un blog ou à un site de contenu. Inclut la prise en charge du mode sombre.
Composant de la barre latérale
Un composant de barre latérale simple et réactif avec un design brutaliste, une palette de couleurs monochromatiques et une prise en charge du mode sombre.
Composant de la barre latérale
Un composant de barre latérale réactif pour présenter des éléments de portefeuille avec des micro-interactions attrayantes et une palette de couleurs complémentaires, prenant en charge le mode sombre.