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.
Codice HTML
<div class="flex bg-gray-200 dark:bg-gray-800 h-screen">
<div class="w-64 h-full shadow-lg rounded-xl bg-gray-300 dark:bg-gray-700 p-4">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full shadow-sm"/>
<h2 class="ml-3 text-xl font-semibold text-gray-800 dark:text-gray-100">User Name</h2>
</div>
<nav>
<ul>
<li class="my-2">
<a href="#" class="block p-2 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 shadow-lg transition-all duration-200">Dashboard</a>
</li>
<li class="my-2">
<a href="#" class="block p-2 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 shadow-lg transition-all duration-200">Profile</a>
</li>
<li class="my-2">
<a href="#" class="block p-2 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 shadow-lg transition-all duration-200">Settings</a>
</li>
<li class="my-2">
<a href="#" class="block p-2 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 shadow-lg transition-all duration-200">Logout</a>
</li>
</ul>
</nav>
</div>
<div class="flex-1 p-10 bg-gray-100 dark:bg-gray-900">
<h1 class="text-2xl font-bold text-gray-800 dark:text-gray-200">Main Content</h1>
<img src="https://picsum.photos/500/300" alt="Placeholder" class="mt-4 rounded-lg shadow-md"/>
</div>
</div>Componenti correlati
Componente della barra laterale 27
Un componente della barra laterale in stile retrò/vintage con effetti reattivi e supporto per temi scuri.
Componente della barra laterale per il settore sanitario
Un componente della barra laterale complesso, minimalista e reattivo per applicazioni sanitarie, dotato di una combinazione di colori analoga e supporto per la modalità scura. Include la navigazione, il profilo utente e i collegamenti rapidi.
Barra laterale Agricoltura sfumata
Un componente della barra laterale semplice e reattivo con un design sfumato monocromatico, adatto per l'agricoltura e i siti Web di allevamento. Include il supporto per la modalità oscura.