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.
HTML Code
<div class="flex h-screen bg-gray-100 dark:bg-gray-900">
<!-- Sidebar -->
<div class="w-64 bg-gray-800 text-white dark:bg-gray-950 dark:text-gray-200 flex flex-col">
<div class="p-6 text-2xl font-bold border-b border-gray-700 dark:border-gray-800">BrutalNav</div>
<nav class="flex-grow">
<a href="#" class="block py-2 px-6 text-gray-300 hover:bg-gray-700 hover:text-white dark:hover:bg-gray-800 dark:hover:text-gray-100 transition duration-200">Home</a>
<a href="#" class="block py-2 px-6 text-gray-300 hover:bg-gray-700 hover:text-white dark:hover:bg-gray-800 dark:hover:text-gray-100 transition duration-200">About</a>
<a href="#" class="block py-2 px-6 text-gray-300 hover:bg-gray-700 hover:text-white dark:hover:bg-gray-800 dark:hover:text-gray-100 transition duration-200">Services</a>
<a href="#" class="block py-2 px-6 text-gray-300 hover:bg-gray-700 hover:text-white dark:hover:bg-gray-800 dark:hover:text-gray-100 transition duration-200">Contact</a>
</nav>
</div>
<!-- Content Area (placeholder) -->
<div class="flex-grow p-10 text-gray-800 dark:text-gray-200">
<h1 class="text-3xl font-bold mb-6">Main Content</h1>
<p>This is the main content area. The sidebar is on the left.</p>
</div>
</div>Composants associés
Composant de la barre latérale
Un composant de barre latérale minimaliste avec un design réactif et une prise en charge du thème sombre, utilisant Tailwind CSS.
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.
Barre latérale sur le neumorphisme
Un composant de barre latérale de style Neumorphisme avec un design réactif et une prise en charge du thème sombre à l’aide de Tailwind CSS.