Componente de la barra lateral
Un componente de barra lateral de estilo Glassmorphism con un esquema de color complementario, diseñado para un sitio web de portafolio con complejidad moderada. Es responsivo y admite el modo oscuro usando Tailwind CSS.
Código HTML
<div class="flex h-screen bg-gray-200 dark:bg-gray-900">
<!-- Sidebar -->
<div class="w-64 bg-white dark:bg-gray-800 p-6 space-y-6 transform -translate-x-full md:translate-x-0 transition duration-200 ease-in-out">
<!-- Glassmorphism Effect -->
<div class="absolute inset-0 bg-blue-500 bg-opacity-20 backdrop-filter backdrop-blur-lg rounded"></div>
<!-- Sidebar Content -->
<div class="relative z-10">
<div class="flex items-center space-x-2">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/75.jpg" alt="Avatar">
<h2 class="text-xl font-semibold text-gray-800 dark:text-white">John Doe</h2>
</div>
<nav class="mt-8">
<a href="#" class="flex items-center space-x-2 py-2 px-4 text-gray-700 dark:text-gray-300 hover:bg-blue-500 hover:text-white rounded-md">
<svg class="h-5 w-5" 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 7m-2 2v5a1 1 0 01-1 1H6a1 1 0 01-1-1v-5a1 1 0 011-1h2"></path></svg>
<span>Home</span>
</a>
<a href="#" class="flex items-center space-x-2 py-2 px-4 text-gray-700 dark:text-gray-300 hover:bg-blue-500 hover:text-white rounded-md">
<svg class="h-5 w-5" 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="M19 11H5m14 0a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2m14 0V9a2 2 0 00-2-2H7a2 2 0 00-2 2v2m7-7h.01"></path></svg>
<span>Projects</span>
</a>
<a href="#" class="flex items-center space-x-2 py-2 px-4 text-gray-700 dark:text-gray-300 hover:bg-blue-500 hover:text-white rounded-md">
<svg class="h-5 w-5" 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 6H5a2 2 0 00-2 2v9a2 2 0 002 2h10a2 2 0 002-2V8a2 2 0 00-2-2h-5m0 0l2-2m-2 2l-2-2m7-3a2 2 0 11-4 0 2 2 0 014 0zM14 13h3m-3 3h3m-9-2h.01"></path></svg>
<span>Blog</span>
</a>
<a href="#" class="flex items-center space-x-2 py-2 px-4 text-gray-700 dark:text-gray-300 hover:bg-blue-500 hover:text-white rounded-md">
<svg class="h-5 w-5" 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 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
<span>Contact</span>
</a>
</nav>
</div>
</div>
<!-- Main Content -->
<div class="flex-1 p-10">
<h1 class="text-2xl font-semibold text-gray-900 dark:text-white">Welcome to my Portfolio</h1>
<!-- Add your main content here -->
</div>
</div>Componentes relacionados
Componente de la barra lateral
Un componente de barra lateral responsivo y minimalista para comercio electrónico, con soporte para modo oscuro. Cuenta con un diseño simple con categorías de productos y un ícono de carrito de compras.
Barra lateral de Glassmorphism con modo oscuro
Un componente de barra lateral responsivo con diseño de glassmorphism y soporte de modo oscuro usando Tailwind CSS. Incluye un logotipo, el nombre del sitio, enlaces de navegación y una sección de perfil de usuario.
Barra lateral de Skeuomorphism
Un componente de barra lateral responsivo con diseño de Skeuomorphism y soporte de modo oscuro usando Tailwind CSS.