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.
HTML Code
<div class="flex h-screen bg-gray-200 dark:bg-gray-800">
<!-- Sidebar -->
<div class="flex flex-col w-64 bg-white dark:bg-gray-900 rounded-lg shadow-xl m-4">
<div class="flex items-center justify-center h-20 shadow-inner bg-gray-100 dark:bg-gray-700 rounded-t-lg">
<svg class="h-10 w-10 text-gray-600 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
<span class="text-2xl font-bold text-gray-700 dark:text-gray-200 ml-2">SkeuoSidebar</span>
</div>
<div class="flex flex-col flex-1 overflow-y-auto">
<nav class="flex-1 px-2 py-4 bg-gray-50 dark:bg-gray-800">
<a href="#" class="flex items-center px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md shadow-inner mb-2">
<svg class="h-6 w-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m0 0l7 7M19 10v10a1 1 0 01-1 1h-3m-2-7v7m-7-7v7"></path></svg>
Dashboard
</a>
<a href="#" class="flex items-center px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md shadow-inner mb-2">
<svg class="h-6 w-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-8m8 0h-5m0 0v5m0-5h3"></path></svg>
Projects
</a>
<a href="#" class="flex items-center px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md shadow-inner mb-2">
<svg class="h-6 w-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M12 20.707v-6.98m0 0a7 7 0 00-7-7h-2a7 7 0 007 7m2 0h2a7 7 0 017-7h2a7 7 0 01-7 7m0 0v6.98m0 0a7 7 0 01-7 7h-2a7 7 0 017-7m2 0h2a7 7 0 007 7h2a7 7 0 00-7-7"></path></svg>
Settings
</a>
</nav>
</div>
<div class="flex items-center justify-center h-20 shadow-inner bg-gray-100 dark:bg-gray-700 rounded-b-lg mt-auto ">
<img class="h-10 w-10 rounded-full border-2 border-gray-300 shadow-md" src="https://randomuser.me/api/portraits/men/80.jpg" alt="Avatar">
<span class="text-gray-700 dark:text-gray-200 ml-2">John Doe</span>
</div>
</div>
<!-- Page Content (Placeholder) -->
<div class="flex-1 p-10 text-2xl font-bold text-gray-600 dark:text-gray-300">
Main Content Goes Here
</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.
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.
Barre latérale du commerce électronique
Barre latérale Glassmorphism réactive pour le commerce électronique avec mode sombre