Barra lateral de Skeuomorphism
Un componente de barra lateral responsivo con diseño de Skeuomorphism y soporte de modo oscuro usando Tailwind CSS.
Código HTML
<div class="flex h-screen bg-gray-200 dark:bg-gray-800">
<!-- Sidebar -->
<div class="flex flex-col w-64 bg-white dark:bg-gray-900 rounded-lg shadow-xl m-4">
<div class="flex items-center justify-center h-20 shadow-inner bg-gray-100 dark:bg-gray-700 rounded-t-lg">
<svg class="h-10 w-10 text-gray-600 dark:text-gray-300" 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="M4 6h16M4 12h16M4 18h16"></path></svg>
<span class="text-2xl font-bold text-gray-700 dark:text-gray-200 ml-2">SkeuoSidebar</span>
</div>
<div class="flex flex-col flex-1 overflow-y-auto">
<nav class="flex-1 px-2 py-4 bg-gray-50 dark:bg-gray-800">
<a href="#" class="flex items-center px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md shadow-inner mb-2">
<svg class="h-6 w-6 mr-2" 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="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m0 0l7 7M19 10v10a1 1 0 01-1 1h-3m-2-7v7m-7-7v7"></path></svg>
Dashboard
</a>
<a href="#" class="flex items-center px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md shadow-inner mb-2">
<svg class="h-6 w-6 mr-2" 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="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-8m8 0h-5m0 0v5m0-5h3"></path></svg>
Projects
</a>
<a href="#" class="flex items-center px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md shadow-inner mb-2">
<svg class="h-6 w-6 mr-2" 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="M12 4.354a4 4 0 110 5.292M12 20.707v-6.98m0 0a7 7 0 00-7-7h-2a7 7 0 007 7m2 0h2a7 7 0 017-7h2a7 7 0 01-7 7m0 0v6.98m0 0a7 7 0 01-7 7h-2a7 7 0 017-7m2 0h2a7 7 0 007 7h2a7 7 0 00-7-7"></path></svg>
Settings
</a>
</nav>
</div>
<div class="flex items-center justify-center h-20 shadow-inner bg-gray-100 dark:bg-gray-700 rounded-b-lg mt-auto ">
<img class="h-10 w-10 rounded-full border-2 border-gray-300 shadow-md" src="https://randomuser.me/api/portraits/men/80.jpg" alt="Avatar">
<span class="text-gray-700 dark:text-gray-200 ml-2">John Doe</span>
</div>
</div>
<!-- Page Content (Placeholder) -->
<div class="flex-1 p-10 text-2xl font-bold text-gray-600 dark:text-gray-300">
Main Content Goes Here
</div>
</div>
Componentes relacionados
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.
Componente de la barra lateral
Un componente de barra lateral receptivo diseñado para aplicaciones de comercio electrónico con elementos de Material Design y una combinación de colores pastel, con soporte para modo oscuro.
Componente de la barra lateral
Un componente de barra lateral receptivo diseñado en un estilo retro/vintage con colores vibrantes para un diseño de tablero. Incluye soporte para el modo oscuro.