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
Composant de la barre latérale
Un composant de barre latérale réactif conçu dans un style rétro/vintage avec des couleurs vives pour une disposition de tableau de bord. Il inclut la prise en charge du mode sombre.
Composant de la barre latérale
Un composant de barre latérale réactif utilisant Tailwind CSS, avec les principes de conception matérielle et la prise en charge du thème sombre. Comprend un en-tête avec un logo et un titre, ainsi qu’un menu de navigation avec des liens.
Composant de la barre latérale
Un composant de barre latérale simple et réactif avec un design brutaliste, une palette de couleurs monochromatiques et une prise en charge du mode sombre.