Componente de la barra lateral
Un componente de barra lateral responsivo diseñado con el estilo Neumorphism usando Tailwind CSS. Presenta una interfaz de usuario suave con sombras sutiles, admite el modo oscuro e incluye imágenes de marcador de posición y avatar.
Código HTML
<div class="flex bg-gray-200 dark:bg-gray-800 h-screen">
<div class="w-64 h-full shadow-lg rounded-xl bg-gray-300 dark:bg-gray-700 p-4">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full shadow-sm"/>
<h2 class="ml-3 text-xl font-semibold text-gray-800 dark:text-gray-100">User Name</h2>
</div>
<nav>
<ul>
<li class="my-2">
<a href="#" class="block p-2 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 shadow-lg transition-all duration-200">Dashboard</a>
</li>
<li class="my-2">
<a href="#" class="block p-2 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 shadow-lg transition-all duration-200">Profile</a>
</li>
<li class="my-2">
<a href="#" class="block p-2 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 shadow-lg transition-all duration-200">Settings</a>
</li>
<li class="my-2">
<a href="#" class="block p-2 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 shadow-lg transition-all duration-200">Logout</a>
</li>
</ul>
</nav>
</div>
<div class="flex-1 p-10 bg-gray-100 dark:bg-gray-900">
<h1 class="text-2xl font-bold text-gray-800 dark:text-gray-200">Main Content</h1>
<img src="https://picsum.photos/500/300" alt="Placeholder" class="mt-4 rounded-lg shadow-md"/>
</div>
</div>Componentes relacionados
Componente de la barra lateral
Un componente de barra lateral responsivo para un portafolio, con un estilo de diseño 3D con un tema oscuro, adecuado para mostrar trabajos o productos, con algunos elementos interactivos y un esquema de color análogo.
Consulting_Sidebar_Dark_Candy_Complex
Un componente de barra lateral complejo y receptivo para consultoría/servicios, con una interfaz de usuario de modo oscuro con acentos de color dulce/dulce. Incluye navegación, perfil de usuario y enlaces rápidos.
Componente de la barra lateral de atención médica
Un componente de barra lateral complejo, minimalista y receptivo para aplicaciones de atención médica, con un esquema de color análogo y compatibilidad con el modo oscuro. Incluye navegación, perfil de usuario y enlaces rápidos.