Componente de la barra lateral
Un componente de barra lateral de modo oscuro responsivo diseñado con Tailwind CSS, con fondos oscuros, efectos de desplazamiento y marcadores de posición para imágenes y avatares.
Código HTML
<div class="flex flex-col h-screen bg-gray-800 text-white p-4">
<div class="flex items-center mb-6">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
<h1 class="text-xl font-semibold">User Name</h1>
</div>
<nav class="flex-1">
<ul>
<li class="mb-4">
<a href="#" class="flex items-center p-2 rounded hover:bg-gray-700 transition duration-300">
<img src="https://picsum.photos/50/50" alt="Home Icon" class="w-6 h-6 mr-2">Home
</a>
</li>
<li class="mb-4">
<a href="#" class="flex items-center p-2 rounded hover:bg-gray-700 transition duration-300">
<img src="https://picsum.photos/50/50" alt="Profile Icon" class="w-6 h-6 mr-2">Profile
</a>
</li>
<li class="mb-4">
<a href="#" class="flex items-center p-2 rounded hover:bg-gray-700 transition duration-300">
<img src="https://picsum.photos/50/50" alt="Settings Icon" class="w-6 h-6 mr-2">Settings
</a>
</li>
<li class="mb-4">
<a href="#" class="flex items-center p-2 rounded hover:bg-gray-700 transition duration-300">
<img src="https://picsum.photos/50/50" alt="Logout Icon" class="w-6 h-6 mr-2">Logout
</a>
</li>
</ul>
</nav>
<footer>
<p class="text-gray-400 text-sm">© 2023 Your Company</p>
</footer>
</div>Componentes relacionados
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 de comercio electrónico
Barra lateral de Glassmorphism responsiva para comercio electrónico con modo oscuro
Componente de la barra lateral de neumorfismo
Un componente de barra lateral receptivo con diseño de neumorfismo, combinación de colores en tonos tierra y complejidad simple, adecuado para blogs o consumo de contenido. Incluye soporte para modo oscuro.