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 navegación responsivo diseñado con conceptos de Material Design utilizando Tailwind CSS, con soporte para temas oscuros e imágenes de marcador de posición.
Industrial_Monochromatic_Navigation
Un componente de navegación complejo y centrado en el modo oscuro para empresas industriales y manufactureras, con un diseño monocromático y múltiples elementos interactivos adecuados para paneles de control e interfaces operativas.
Componentes de mejora de la navegación
Un componente de navegación diseñado en 3D con un esquema de color análogo, complejidad moderada, adecuado para la visualización de datos del tablero y los paneles de control.