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
Barra lateral de blog simple y vibrante
Un componente de barra lateral simple y receptivo para el contenido del blog, diseñado con colores vibrantes y una sensación similar a la de un material utilizando Tailwind CSS. Incluye enlaces de navegación y una sección de perfil de usuario. Admite el modo oscuro usando el prefijo dark: de Tailwind. Fijo en pantallas más grandes, oculto en pantallas más pequeñas.
Componente de la barra lateral 27
Un componente de barra lateral de estilo retro/vintage con efectos responsivos y compatibilidad con temas oscuros.
Barra lateral Pastel Skeuomórfico
Un componente de barra lateral simple y receptivo con diseño esqueuomórfico y colores pastel, adecuado para un blog o sitio de contenido. Incluye soporte para modo oscuro.