Componente de navegación de la barra lateral: escala de grises
Componente de navegación de la barra lateral responsiva
Código HTML
<div class="flex h-screen bg-gray-100 dark:bg-gray-900">
<!-- Sidebar -->
<div class="flex flex-col w-64 bg-white dark:bg-gray-800 shadow-lg">
<div class="flex items-center justify-center h-16 shadow-md">
<span class="text-xl font-semibold text-gray-700 dark:text-white">Company Name</span>
</div>
<div class="flex flex-col flex-1 overflow-y-auto">
<nav class="flex-1 px-2 py-4 bg-gray-200 dark:bg-gray-700">
<a href="#" class="flex items-center px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600 rounded">
<svg class="h-5 w-5 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="M4 6h16M4 12h16M4 18h16"></path></svg>
Dashboard
</a>
<a href="#" class="flex items-center px-4 py-2 mt-2 text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600 rounded">
<svg class="h-5 w-5 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 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
Projects
</a>
<a href="#" class="flex items-center px-4 py-2 mt-2 text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600 rounded">
<svg class="h-5 w-5 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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
Team
</a>
<a href="#" class="flex items-center px-4 py-2 mt-2 text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600 rounded">
<svg class="h-5 w-5 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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.23-.14.447-.297.66-.48z"></path></svg>
Settings
</a>
</nav>
</div>
</div>
<!-- Main content (placeholder) -->
<div class="flex flex-col flex-1 overflow-y-auto">
<div class="h-16 bg-white dark:bg-gray-800 shadow-md"></div>
<div class="p-4">
<!-- Your main content goes here -->
</div>
</div>
</div>Componentes relacionados
RetroPastelSocialSidebar
Un componente de navegación de barra lateral simple y receptivo con diseño retro / vintage de los 80 / 90, colores pastel y soporte para modo oscuro, diseñado para interfaces de redes sociales que usan Tailwind CSS.
Gaming_Sidebar_Navigation_Component
Un componente de navegación de barra lateral receptivo para sitios web de juegos, con un diseño monoespaciado/inspirado en desarrolladores con alto contraste, compatibilidad con modo oscuro y elementos interactivos. Ideal para interfaces de juegos y portales comunitarios.
Componente de navegación de la barra lateral de redes sociales
Componente de navegación de barra lateral de redes sociales receptivo con soporte de tema oscuro que usa brutalismo, tonos de tierra y principios de diseño complejos. No se necesita JavaScript.