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 conçu pour les applications de commerce électronique avec des éléments de conception matérielle et une palette de couleurs pastel, avec prise en charge du mode sombre.
Barre latérale sur le neumorphisme
Un composant de barre latérale de style Neumorphisme avec un design réactif et une prise en charge du thème sombre à l’aide de Tailwind CSS.
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.