Composant de barre latérale rétro
Un composant de barre latérale réactif avec un design rétro/vintage pour présenter du travail ou des produits, utilisant une palette de couleurs en niveaux de gris et des classes CSS Tailwind, prenant en charge le mode sombre.
HTML Code
<div class="flex flex-col h-screen bg-white dark:bg-gray-800">
<div class="flex items-center justify-center p-4 bg-gray-200 dark:bg-gray-700">
<h1 class="text-2xl font-bold text-gray-800 dark:text-white">My Portfolio</h1>
</div>
<div class="flex-grow p-4">
<div class="flex flex-col space-y-4">
<a href="#" class="flex items-center p-2 bg-gray-300 dark:bg-gray-600 rounded hover:bg-gray-400 dark:hover:bg-gray-500 transition ease-in-out duration-200">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User" class="w-10 h-10 rounded-full mr-2">
<span class="text-gray-700 dark:text-gray-200">Home</span>
</a>
<a href="#" class="flex items-center p-2 bg-gray-300 dark:bg-gray-600 rounded hover:bg-gray-400 dark:hover:bg-gray-500 transition ease-in-out duration-200">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User" class="w-10 h-10 rounded-full mr-2">
<span class="text-gray-700 dark:text-gray-200">About</span>
</a>
<a href="#" class="flex items-center p-2 bg-gray-300 dark:bg-gray-600 rounded hover:bg-gray-400 dark:hover:bg-gray-500 transition ease-in-out duration-200">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User" class="w-10 h-10 rounded-full mr-2">
<span class="text-gray-700 dark:text-gray-200">Projects</span>
</a>
<a href="#" class="flex items-center p-2 bg-gray-300 dark:bg-gray-600 rounded hover:bg-gray-400 dark:hover:bg-gray-500 transition ease-in-out duration-200">
<img src="https://randomuser.me/api/portraits/men/4.jpg" alt="User" class="w-10 h-10 rounded-full mr-2">
<span class="text-gray-700 dark:text-gray-200">Contact</span>
</a>
</div>
</div>
<div class="p-4 text-center bg-gray-200 dark:bg-gray-700">
<p class="text-gray-600 dark:text-gray-300">© 2023 My Portfolio. All rights reserved.</p>
</div>
</div>Composants associés
Barre latérale Skeuomorphism
Un composant de barre latérale réactif avec un design Skeuomorphism et une prise en charge du mode sombre à l’aide de Tailwind CSS.
Composant de la barre latérale
Un composant de la barre latérale conçu avec un style skeuomorphe qui donne une sensation du monde réel dans un format numérique. Il prend en charge le design réactif et un thème sombre.
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.