Componentes de mejora de la navegación
Un componente de navegación de estilo Neumorphism con soporte para modo oscuro y diseño responsivo
Código HTML
<nav class="bg-gray-100 dark:bg-gray-800 shadow-lg rounded-lg p-4 flex flex-col md:flex-row items-center justify-between transition-all duration-300">
<div class="flex items-center">
<img src="https://picsum.photos/40" alt="Logo" class="w-10 h-10 rounded-full shadow-md mb-2">
<span class="text-xl font-semibold text-gray-800 dark:text-gray-200 ml-2">Brand Name</span>
</div>
<div class="flex flex-col md:flex-row md:space-x-4 mt-4 md:mt-0">
<a href="#" class="text-gray-700 dark:text-gray-300 py-2 px-4 rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300">Home</a>
<a href="#" class="text-gray-700 dark:text-gray-300 py-2 px-4 rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300">About</a>
<a href="#" class="text-gray-700 dark:text-gray-300 py-2 px-4 rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300">Services</a>
<a href="#" class="text-gray-700 dark:text-gray-300 py-2 px-4 rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300">Contact</a>
</div>
<div class="mt-4 md:mt-0">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-10 h-10 rounded-full shadow-md">
</div>
</nav>
Componentes relacionados
Componentes de mejora de la navegación
Un componente de mejora de la navegación receptiva para un blog en estilo de modo oscuro con colores vibrantes y características de complejidad moderada.
Cyberpunk_Portfolio_Navigation
Un componente de navegación complejo y receptivo con temática cyberpunk para una cartera, con una estética futurista de color púrpura neón, fondos oscuros y elementos interactivos. Incluye soporte para modo oscuro.
Componente de mejora de la navegación
Un componente de mejora de la navegación diseñado en un estilo brutalista. Con efectos responsivos, compatibilidad con temas oscuros e imágenes de marcador de posición.