Composant de la barre latérale
Un composant de barre latérale réactif pour un portfolio, avec un style de conception 3D avec un thème sombre, adapté à la présentation de travaux ou de produits, avec quelques éléments interactifs et une palette de couleurs analogue.
HTML Code
<aside class="bg-gray-800 dark:bg-gray-900 w-64 h-screen shadow-lg transform transition-transform duration-300 relative hover:translate-x-1 hover:shadow-2xl">
<div class="flex items-center justify-center h-16 border-b border-gray-700 dark:border-gray-600">
<h1 class="text-white text-lg font-bold">My Portfolio</h1>
</div>
<nav class="flex flex-col p-4">
<a href="#" class="flex items-center p-2 mb-2 text-gray-300 rounded hover:bg-gray-700 dark:hover:bg-gray-800 transition">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
<span>Home</span>
</a>
<a href="#" class="flex items-center p-2 mb-2 text-gray-300 rounded hover:bg-gray-700 dark:hover:bg-gray-800 transition">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
<span>About</span>
</a>
<a href="#" class="flex items-center p-2 mb-2 text-gray-300 rounded hover:bg-gray-700 dark:hover:bg-gray-800 transition">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
<span>Projects</span>
</a>
<a href="#" class="flex items-center p-2 mb-2 text-gray-300 rounded hover:bg-gray-700 dark:hover:bg-gray-800 transition">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
<span>Contact</span>
</a>
</nav>
<footer class="absolute bottom-0 left-0 w-full border-t border-gray-700 dark:border-gray-600 p-4">
<p class="text-gray-500 text-sm text-center">© 2023 My Portfolio</p>
</footer>
</aside>Composants associés
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.
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.
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.