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
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 barra lateral retro
Un componente de barra lateral receptivo con un diseño retro/vintage para exhibir trabajos o productos, utilizando un esquema de color en escala de grises y clases CSS de Tailwind, que admite el modo oscuro.
Componente de la barra lateral
Un componente minimalista de la barra lateral con diseño responsivo y soporte para temas oscuros, que utiliza Tailwind CSS.