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.
HTML Code
<aside class="w-64 h-full bg-white dark:bg-gray-800 shadow-lg transition-transform duration-300 ease-in-out transform hover:scale-105">
<div class="p-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-white">Portfolio</h2>
<div class="mt-4">
<a href="#" class="block py-2 text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200">Home</a>
<a href="#" class="block py-2 text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200">Projects</a>
<a href="#" class="block py-2 text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200">About Me</a>
<a href="#" class="block py-2 text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200">Contact</a>
</div>
</div>
<div class="flex flex-col items-center px-4 py-4">
<img src="https://picsum.photos/80/80" alt="Portfolio Avatar" class="rounded-full border-2 border-blue-500 dark:border-blue-400 mb-2" />
<h3 class="text-lg font-medium text-gray-800 dark:text-white">John Doe</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">Web Developer</p>
</div>
</aside>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 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.
Neon_Glow_Grayscale_Sports_Sidebar
Un composant de barre latérale complexe et réactif pour les applications de sport/fitness, avec des effets de néon/lueur dans une palette de couleurs en niveaux de gris. Inclut la prise en charge du mode sombre et des éléments interactifs tels que le profil, la navigation, les équipes et les paramètres.