Componente de navegación de la barra lateral
Un componente de navegación de la barra lateral adaptado para blogs, diseñado con elementos 3D y colores vibrantes. Admite el modo oscuro y es responsivo, con un diseño simple adecuado para el consumo de contenido.
Código HTML
<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 h-screen sticky top-0">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Navigation</h2>
<ul class="space-y-4">
<li>
<a href="#" class="flex items-center p-2 rounded-lg hover:bg-blue-500 hover:text-white transition ease-in-out duration-150">
<img src="https://picsum.photos/30/30" alt="Avatar" class="rounded-full border border-gray-300 dark:border-gray-700">
<span class="ml-2 font-medium text-gray-700 dark:text-gray-300">Home</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-2 rounded-lg hover:bg-blue-500 hover:text-white transition ease-in-out duration-150">
<img src="https://picsum.photos/30/30" alt="Avatar" class="rounded-full border border-gray-300 dark:border-gray-700">
<span class="ml-2 font-medium text-gray-700 dark:text-gray-300">About</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-2 rounded-lg hover:bg-blue-500 hover:text-white transition ease-in-out duration-150">
<img src="https://picsum.photos/30/30" alt="Avatar" class="rounded-full border border-gray-300 dark:border-gray-700">
<span class="ml-2 font-medium text-gray-700 dark:text-gray-300">Blog</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-2 rounded-lg hover:bg-blue-500 hover:text-white transition ease-in-out duration-150">
<img src="https://picsum.photos/30/30" alt="Avatar" class="rounded-full border border-gray-300 dark:border-gray-700">
<span class="ml-2 font-medium text-gray-700 dark:text-gray-300">Contact</span>
</a>
</li>
</ul>
</div>Componentes relacionados
Glassmorphism Sidebar Navigation
Un componente de navegación de barra lateral receptivo con diseño de Glassmorphism, compatibilidad con modo oscuro y uso de Tailwind CSS. Cuenta con elementos translúcidos similares al vidrio esmerilado con efectos de desenfoque.
Componente de navegación de la barra lateral
Un componente de navegación de barra lateral simple y receptivo diseñado para tableros, con animaciones atractivas y una combinación de colores terrosos. Es compatible con el modo oscuro.
Navegación en la barra lateral
Componente de navegación de barra lateral receptivo con esquema de color analógico y microinteracciones, incluido el soporte de tema oscuro.