Componente della barra laterale
Un componente della barra laterale semplice e reattivo con un design brutalista, una combinazione di colori monocromatica e il supporto della modalità scura.
Codice HTML
<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>Componenti correlati
Componente della barra laterale
Un componente della barra laterale complesso, reattivo, in stile Glassmorphism per un cruscotto, con toni della terra e supporto per la modalità scura.
Componente della barra laterale
Un componente reattivo della barra laterale progettato con lo stile Neumorphism utilizzando Tailwind CSS. Presenta un aspetto morbido dell'interfaccia utente con ombre sottili, supporta la modalità oscura e include immagini segnaposto e avatar.
Componente della barra laterale 27
Un componente della barra laterale in stile retrò/vintage con effetti reattivi e supporto per temi scuri.