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.
Código HTML
<!-- Sidebar Component -->
<div class="hidden lg:block w-64 bg-purple-600 text-white dark:bg-purple-800 dark:text-yellow-200 h-screen fixed top-0 left-0 p-5 space-y-6">
<!-- Sidebar Header -->
<div class="flex items-center space-x-3">
<svg class="w-8 h-8 text-yellow-300 dark:text-yellow-100" 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="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9m2 10V7a2 2 0 00-2-2h-1C9 4 7 2 5 2c-2 0-3 1.5-3 3v15a1 1 0 001 1h16z"></path></svg>
<span class="text-2xl font-semibold text-yellow-300 dark:text-yellow-100">Blog Name</span>
</div>
<!-- Navigation -->
<nav class="space-y-2">
<a href="#" class="block py-2 px-3 rounded transition duration-200 hover:bg-purple-700 dark:hover:bg-purple-900 text-white dark:text-yellow-200 hover:text-yellow-300 dark:hover:text-yellow-100">
Home
</a>
<a href="#" class="block py-2 px-3 rounded transition duration-200 hover:bg-purple-700 dark:hover:bg-purple-900 text-white dark:text-yellow-200 hover:text-yellow-300 dark:hover:text-yellow-100">
Categories
</a>
<a href="#" class="block py-2 px-3 rounded transition duration-200 hover:bg-purple-700 dark:hover:bg-purple-900 text-white dark:text-yellow-200 hover:text-yellow-300 dark:hover:text-yellow-100">
Popular
</a>
<a href="#" class="block py-2 px-3 rounded transition duration-200 hover:bg-purple-700 dark:hover:bg-purple-900 text-white dark:text-yellow-200 hover:text-yellow-300 dark:hover:text-yellow-100">
About
</a>
</nav>
<!-- User Profile (Optional) - Position at bottom -->
<div class="absolute bottom-5 left-5 right-5">
<div class="flex items-center space-x-3 p-3 bg-purple-700 dark:bg-purple-900 rounded">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/thumb/women/44.jpg" alt="User Avatar">
<div class="flex flex-col">
<span class="font-semibold text-yellow-200 dark:text-yellow-100 text-sm">Jane Doe</span>
<span class="text-xs text-purple-200 dark:text-purple-300">View Profile</span>
</div>
</div>
</div>
</div>Componentes relacionados
Componente de la barra lateral
Un componente de barra lateral de estilo Glassmorphism con un esquema de color complementario, diseñado para un sitio web de portafolio con complejidad moderada. Es responsivo y admite el modo oscuro usando Tailwind CSS.
Componente de la barra lateral 27
Un componente de barra lateral de estilo retro/vintage con efectos responsivos y compatibilidad con temas oscuros.
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.