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
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.
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.
Barre latérale du commerce électronique
Barre latérale Glassmorphism réactive pour le commerce électronique avec mode sombre