Composant de la barre latérale
Un composant de barre latérale réactif conçu dans un style rétro/vintage avec des couleurs vives pour une disposition de tableau de bord. Il inclut la prise en charge du mode sombre.
HTML Code
<div class="flex flex-col w-64 h-screen p-4 bg-blue-600 text-white dark:bg-blue-900">
<h2 class="text-2xl font-bold mb-6 text-yellow-500">Dashboard</h2>
<div class="flex flex-col space-y-4">
<a href="#" class="p-2 hover:bg-yellow-500 hover:text-black rounded-md transition">Home</a>
<a href="#" class="p-2 hover:bg-yellow-500 hover:text-black rounded-md transition">Reports</a>
<a href="#" class="p-2 hover:bg-yellow-500 hover:text-black rounded-md transition">Analytics</a>
<a href="#" class="p-2 hover:bg-yellow-500 hover:text-black rounded-md transition">Settings</a>
</div>
<div class="mt-auto pt-4 border-t border-gray-300 dark:border-gray-700">
<div class="flex items-center space-x-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
<span class="text-sm font-semibold">John Doe</span>
</div>
</div>
</div>Composants associés
Composant de la barre latérale Neumorphism
Un composant de barre latérale réactif avec un design Neumorphism, une palette de couleurs Earth tones et une complexité simple, adapté aux blogs ou à la consommation de contenu. Inclut la prise en charge du mode sombre.
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.
Barre latérale du commerce électronique
Barre latérale Glassmorphism réactive pour le commerce électronique avec mode sombre