Componente de navegación de la barra lateral de Glassmorphism
Un componente de navegación de la barra lateral para blogs con estilo Glassmorphism, con un esquema de color monocromático. Es un diseño simple y responsivo con soporte para modo oscuro, usando solo HTML y Tailwind CSS. La barra lateral incluye un título del sitio, enlaces de navegación y una sección de perfil.
Código HTML
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col md:flex-row">
<!-- Sidebar -->
<div class="w-full md:w-64 bg-white dark:bg-gray-800 bg-opacity-60 dark:bg-opacity-60 backdrop-filter backdrop-blur-lg p-5 shadow-lg md:min-h-screen">
<div class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-6">MyBlog</div>
<nav>
<a href="#" class="block py-2 px-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-blue-600 hover:text-white dark:hover:bg-blue-600 dark:hover:text-white transition duration-300 ease-in-out">
Home
</a>
<a href="#" class="block py-2 px-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-blue-600 hover:text-white dark:hover:bg-blue-600 dark:hover:text-white transition duration-300 ease-in-out mt-2">
Articles
</a>
<a href="#" class="block py-2 px-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-blue-600 hover:text-white dark:hover:bg-blue-600 dark:hover:text-white transition duration-300 ease-in-out mt-2">
Categories
</a>
<a href="#" class="block py-2 px-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-blue-600 hover:text-white dark:hover:bg-blue-600 dark:hover:text-white transition duration-300 ease-in-out mt-2">
About
</a>
<a href="#" class="block py-2 px-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-blue-600 hover:text-white dark:hover:bg-blue-600 dark:hover:text-white transition duration-300 ease-in-out mt-2">
Contact
</a>
</nav>
<div class="mt-8 pt-8 border-t border-gray-300 dark:border-gray-700">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-blue-400">
<div class="ml-3">
<p class="text-gray-800 dark:text-gray-200 font-medium">John Doe</p>
<p class="text-gray-600 dark:text-gray-400 text-sm">Blogger</p>
</div>
</div>
</div>
</div>
<!-- Main Content (Placeholder for blog content) -->
<div class="flex-1 p-8">
<h1 class="text-3xl font-bold text-gray-800 dark:text-gray-200 mb-6">Welcome to MyBlog!</h1>
<p class="text-gray-700 dark:text-gray-300 leading-relaxed">
This is a placeholder for your blog content. The sidebar on the left demonstrates a Glassmorphism-style navigation.
It's responsive, adapts to dark mode, and uses a monochromatic color scheme for a clean and modern look.
Explore the navigation links to imagine various sections of your blog.
</p>
<div class="mt-8 grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="bg-white dark:bg-gray-800 bg-opacity-60 dark:bg-opacity-60 backdrop-filter backdrop-blur-lg p-6 rounded-lg shadow-lg">
<img src="https://picsum.photos/seed/blog1/400/250" alt="Blog Post 1" class="rounded-lg mb-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-2">My First Awesome Post</h2>
<p class="text-gray-700 dark:text-gray-300 text-sm">A short description of the first amazing blog post. Click to read more!</p>
</div>
<div class="bg-white dark:bg-gray-800 bg-opacity-60 dark:bg-opacity-60 backdrop-filter backdrop-blur-lg p-6 rounded-lg shadow-lg">
<img src="https://picsum.photos/seed/blog2/400/250" alt="Blog Post 2" class="rounded-lg mb-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-2">Another Great Article</h2>
<p class="text-gray-700 dark:text-gray-300 text-sm">Discover more insights in this compelling second article.</p>
</div>
</div>
</div>
</div>Componentes relacionados
Componente de navegación de la barra lateral - Juegos
Un componente de navegación de barra lateral minimalista y receptivo con negro, blanco y un color de acento brillante, diseñado para sitios web de juegos. Incluye soporte para modo oscuro.
Componente de navegación de la barra lateral
Una barra de navegación lateral simple y receptiva para aplicaciones de redes sociales, optimizada para el modo oscuro con un esquema de color análogo. Incluye una sección de perfil con un avatar y un nombre de usuario, y enlaces de navegación. El diseño utiliza Tailwind CSS para el estilo y la capacidad de respuesta, con soporte para el modo oscuro a través del prefijo dark: incorporado de Tailwind.
Glassmorphism Sidebar Navigation
Un componente de navegación de barra lateral receptiva al estilo de Glassmorphism para carteras, con soporte para modo oscuro y combinación de colores análoga. Cuenta con efectos de vidrio esmerilado y múltiples elementos interactivos que usan solo HTML y Tailwind CSS.