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 que usa Tailwind CSS, con principios de Material Design y soporte para temas oscuros. Incluye un encabezado con un logotipo y un título, y un menú de navegación con enlaces.
Componente de la barra lateral
Un componente de barra lateral responsivo diseñado con efecto Glassmorphism y un esquema de color complementario, adecuado para un blog o consumo de contenido.
Neon_Glow_Grayscale_Sports_Sidebar
Un componente de barra lateral complejo y sensible para aplicaciones deportivas/fitness, con efectos de neón/brillo dentro de un esquema de color en escala de grises. Incluye compatibilidad con el modo oscuro y elementos interactivos como perfil, navegación, equipos y configuraciones.