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.
HTML Code
<div class="flex h-screen bg-gray-100 dark:bg-gray-900">
<!-- Sidebar -->
<div class="sidebar w-64 bg-white dark:bg-gray-800 shadow-md">
<div class="sidebar-header flex items-center justify-center h-16 border-b dark:border-gray-700">
<img src="https://picsum.photos/40" alt="Logo" class="w-10 h-10 rounded-full">
<h2 class="text-xl font-semibold text-gray-800 dark:text-white ml-3">My App</h2>
</div>
<div class="sidebar-nav mt-4">
<ul>
<li>
<a href="#" class="flex items-center py-2 px-4 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700">
<svg class="w-5 h-5 mr-3" 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 10h16M4 14h16M4 18h16"></path></svg>
Dashboard
</a>
</li>
<li>
<a href="#" class="flex items-center py-2 px-4 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700">
<svg class="w-5 h-5 mr-3" 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 4v16m8-8H4"></path></svg>
Settings
</a>
</li>
<li>
<a href="#" class="flex items-center py-2 px-4 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700">
<svg class="w-5 h-5 mr-3" 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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
Profile
</a>
</li>
</ul>
</div>
</div>
<!-- Page Content (Placeholder) -->
<div class="flex-1 p-6">
<h1 class="text-2xl font-semibold text-gray-900 dark:text-white">Main Content Area</h1>
<p class="mt-4 text-gray-700 dark:text-gray-300">This is where your main page content goes.</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.
Composant de la barre latérale
Un composant de barre latérale réactif conçu avec le style Neumorphism à l’aide de Tailwind CSS. Il présente une interface utilisateur douce avec des ombres subtiles, prend en charge le mode sombre et comprend des images de remplacement et un avatar.
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.