Componente de la barra lateral
Un componente de barra lateral responsivo que usa Tailwind CSS, con principios de Material Design y soporte para temas oscuros. Incluye un encabezado con un logotipo y un título, y un menú de navegación con enlaces.
Código HTML
<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>Componentes relacionados
Componente de la barra lateral
Un componente de barra lateral receptivo para mostrar elementos de cartera con microinteracciones atractivas y un esquema de color complementario, compatible con el modo oscuro.
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.
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.