Componente de la barra lateral
Un componente de barra lateral receptivo diseñado en un estilo retro/vintage con colores vibrantes para un diseño de tablero. Incluye soporte para el modo oscuro.
Código HTML
<div class="flex flex-col w-64 h-screen p-4 bg-blue-600 text-white dark:bg-blue-900">
<h2 class="text-2xl font-bold mb-6 text-yellow-500">Dashboard</h2>
<div class="flex flex-col space-y-4">
<a href="#" class="p-2 hover:bg-yellow-500 hover:text-black rounded-md transition">Home</a>
<a href="#" class="p-2 hover:bg-yellow-500 hover:text-black rounded-md transition">Reports</a>
<a href="#" class="p-2 hover:bg-yellow-500 hover:text-black rounded-md transition">Analytics</a>
<a href="#" class="p-2 hover:bg-yellow-500 hover:text-black rounded-md transition">Settings</a>
</div>
<div class="mt-auto pt-4 border-t border-gray-300 dark:border-gray-700">
<div class="flex items-center space-x-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
<span class="text-sm font-semibold">John Doe</span>
</div>
</div>
</div>Componentes relacionados
Componente de la barra lateral
Un componente de barra lateral complejo, receptivo y de estilo Glassmorphism para un tablero, con tonos tierra y compatibilidad 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.
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.