Componente de navegación
Un componente de navegación simple diseñado para un blog con microinteracciones y combinación de colores pastel. Cuenta con un diseño responsivo y soporte para temas oscuros.
Código HTML
<nav class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md transition-all duration-300">
<div class="container mx-auto flex justify-between items-center">
<div class="flex items-center space-x-4">
<img src="https://picsum.photos/30/30" alt="Logo" class="rounded-full">
<span class="text-xl font-semibold text-gray-800 dark:text-white">My Blog</span>
</div>
<ul class="flex space-x-6">
<li>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white transition-colors duration-300">Home</a>
</li>
<li>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white transition-colors duration-300">About</a>
</li>
<li>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white transition-colors duration-300">Blog</a>
</li>
<li>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white transition-colors duration-300">Contact</a>
</li>
</ul>
</div>
</nav>Componentes relacionados
Componente de navegación de redes sociales
Un componente de navegación responsivo diseñado para interfaces de redes sociales, con una estética de Material Design que utiliza un tema oscuro con Tailwind CSS.
Componente de navegación 3D
Un componente de navegación 3D responsivo diseñado con Tailwind CSS, con soporte para temas oscuros y elementos tridimensionales atractivos.
3D_Triadic_Simple_Business_Navigation
Un componente de navegación empresarial simple y receptivo con una estética de diseño 3D y un esquema de color triádico, compatible con el modo oscuro.