Composant de la barre latérale 27
Un composant de barre latérale de style rétro/vintage avec des effets réactifs et une prise en charge du thème sombre.
HTML Code
<div class="bg-gray-100 dark:bg-gray-800 h-screen w-64 shadow-lg p-5">
<div class="flex items-center mb-6">
<img class="w-16 h-16 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
<h1 class="text-2xl font-bold text-gray-800 dark:text-white ml-3">Hello, User!</h1>
</div>
<ul class="space-y-4">
<li>
<a href="#" class="flex items-center p-3 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-300">
<img class="w-5 h-5 mr-2" src="https://picsum.photos/20/20?random=1" alt="Icon">
<span class="text-gray-800 dark:text-white">Dashboard</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-3 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-300">
<img class="w-5 h-5 mr-2" src="https://picsum.photos/20/20?random=2" alt="Icon">
<span class="text-gray-800 dark:text-white">Profile</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-3 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-300">
<img class="w-5 h-5 mr-2" src="https://picsum.photos/20/20?random=3" alt="Icon">
<span class="text-gray-800 dark:text-white">Settings</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-3 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-300">
<img class="w-5 h-5 mr-2" src="https://picsum.photos/20/20?random=4" alt="Icon">
<span class="text-gray-800 dark:text-white">Messages</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-3 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-300">
<img class="w-5 h-5 mr-2" src="https://picsum.photos/20/20?random=5" alt="Icon">
<span class="text-gray-800 dark:text-white">Logout</span>
</a>
</li>
</ul>
</div>Composants associés
Glassmorphism Sidebar avec mode sombre
Un composant de barre latérale réactif avec un design glassmorphism et une prise en charge du mode sombre à l’aide de Tailwind CSS. Il comprend un logo, le nom du site, des liens de navigation et une section de profil utilisateur.
Composant de la barre latérale
Un composant de barre latérale réactif utilisant Tailwind CSS, avec les principes de conception matérielle et la prise en charge du thème sombre. Comprend un en-tête avec un logo et un titre, ainsi qu’un menu de navigation avec des liens.
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.