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
Glassmorphism Sidebar avec mode sombre
Un composant de barre latérale réactif avec un design glassmorphism et une prise en charge du mode sombre à l’aide de Tailwind CSS. Il comprend un logo, le nom du site, des liens de navigation et une section de profil utilisateur.
RetroRealEstateBarre latérale
Un composant de barre latérale simple et réactif avec une esthétique rétro/vintage, une palette de couleurs neutres et chaudes, conçu pour les plateformes immobilières. Inclut la prise en charge du mode sombre.
Neumorphic_Sidebar_Component
Un composant de barre latérale simple, réactif et neumorphe pour les sites Web d’entreprise/d’entreprise avec des couleurs complémentaires et la prise en charge du mode sombre.