Componente de la barra lateral
Un componente de barra lateral diseñado con un estilo esqueuomórfico que proporciona una sensación del mundo real en formato digital. Es compatible con el diseño responsivo y un tema oscuro.
Código HTML
<div class="flex flex-col h-screen bg-white dark:bg-gray-800 shadow-lg rounded-lg w-64">
<div class="flex items-center justify-center h-16 bg-gray-200 dark:bg-gray-700 rounded-t-lg">
<h1 class="text-xl font-bold text-gray-800 dark:text-white">Sidebar</h1>
</div>
<div class="flex-grow overflow-y-auto p-4">
<ul class="space-y-2">
<li>
<a href="#" class="flex items-center p-3 text-gray-600 rounded-lg hover:bg-gray-300 dark:text-gray-300 dark:hover:bg-gray-600 transition ease-in-out duration-150">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3" />
<span>Profile</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-3 text-gray-600 rounded-lg hover:bg-gray-300 dark:text-gray-300 dark:hover:bg-gray-600 transition ease-in-out duration-150">
<img src="https://picsum.photos/40/40?random=1" alt="Placeholder" class="w-10 h-10 rounded mr-3" />
<span>Dashboard</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-3 text-gray-600 rounded-lg hover:bg-gray-300 dark:text-gray-300 dark:hover:bg-gray-600 transition ease-in-out duration-150">
<img src="https://picsum.photos/40/40?random=2" alt="Placeholder" class="w-10 h-10 rounded mr-3" />
<span>Settings</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-3 text-gray-600 rounded-lg hover:bg-gray-300 dark:text-gray-300 dark:hover:bg-gray-600 transition ease-in-out duration-150">
<img src="https://picsum.photos/40/40?random=3" alt="Placeholder" class="w-10 h-10 rounded mr-3" />
<span>Messages</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-3 text-gray-600 rounded-lg hover:bg-gray-300 dark:text-gray-300 dark:hover:bg-gray-600 transition ease-in-out duration-150">
<img src="https://picsum.photos/40/40?random=4" alt="Placeholder" class="w-10 h-10 rounded mr-3" />
<span>Logout</span>
</a>
</li>
</ul>
</div>
</div>Componentes relacionados
Componente de la barra lateral
Un componente minimalista de la barra lateral con diseño responsivo y soporte para temas oscuros, que utiliza Tailwind CSS.
Consulting_Sidebar_Dark_Candy_Complex
Un componente de barra lateral complejo y receptivo para consultoría/servicios, con una interfaz de usuario de modo oscuro con acentos de color dulce/dulce. Incluye navegación, perfil de usuario y enlaces rápidos.
Componente de la barra lateral
Un componente de barra lateral responsivo para un portafolio, con un estilo de diseño 3D con un tema oscuro, adecuado para mostrar trabajos o productos, con algunos elementos interactivos y un esquema de color análogo.