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
Composant de la barre latérale
Un composant de barre latérale de style Glassmorphism avec une palette de couleurs complémentaire, conçu pour un site web de portfolio avec une complexité modérée. Il est réactif et prend en charge le mode sombre à l’aide de Tailwind CSS.
Barre latérale de blog simple et dynamique
Un composant de barre latérale simple et réactif pour le contenu du blog, conçu avec des couleurs vives et une sensation de matériau à l’aide de Tailwind CSS. Comprend des liens de navigation et une section de profil utilisateur. Prend en charge le mode sombre à l’aide du préfixe dark : de Tailwind. Fixé sur les grands écrans, caché sur les petits écrans.
3D_Sidebar_Documentation_Wiki
Un composant de barre latérale réactif complexe, inspiré de la 3D, pour la documentation et les sites wiki, utilisant des neutres chauds avec une prise en charge complète du mode sombre.