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.
Código HTML
<aside class="bg-white bg-opacity-30 backdrop-blur-lg shadow-md rounded-lg p-4 w-64 dark:bg-gray-800 dark:bg-opacity-30">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-3">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">User Name</h2>
</div>
<nav>
<ul class="space-y-2">
<li>
<a href="#" class="block px-3 py-2 rounded-md text-gray-900 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 transition">Home</a>
</li>
<li>
<a href="#" class="block px-3 py-2 rounded-md text-gray-900 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 transition">About</a>
</li>
<li>
<a href="#" class="block px-3 py-2 rounded-md text-gray-900 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 transition">Blog</a>
</li>
<li>
<a href="#" class="block px-3 py-2 rounded-md text-gray-900 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 transition">Contact</a>
</li>
</ul>
</nav>
<div class="mt-4">
<h3 class="text-md font-semibold text-gray-800 dark:text-white">Featured Posts</h3>
<ul class="space-y-2">
<li>
<a href="#" class="block px-3 py-2 rounded-md text-gray-900 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 transition">Post Title 1</a>
</li>
<li>
<a href="#" class="block px-3 py-2 rounded-md text-gray-900 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 transition">Post Title 2</a>
</li>
<li>
<a href="#" class="block px-3 py-2 rounded-md text-gray-900 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 transition">Post Title 3</a>
</li>
</ul>
</div>
<div class="mt-4">
<img src="https://picsum.photos/300/200" alt="Sample Image" class="rounded-lg shadow-md">
</div>
</aside>Componentes relacionados
Componente de la barra lateral
Un componente minimalista de la barra lateral con diseño responsivo y soporte para temas oscuros, que utiliza Tailwind CSS.
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.
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.