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.
Código HTML
<nav class="bg-gray-800 dark:bg-gray-900 p-4 rounded-lg shadow-lg">
<div class="container mx-auto flex items-center justify-between">
<h1 class="text-white text-2xl font-bold">Dashboard</h1>
<div class="hidden md:flex space-x-4">
<a href="#" class="text-gray-300 hover:text-white transition duration-300 ease-in-out transform hover:scale-105">Home</a>
<a href="#" class="text-gray-300 hover:text-white transition duration-300 ease-in-out transform hover:scale-105">Reports</a>
<a href="#" class="text-gray-300 hover:text-white transition duration-300 ease-in-out transform hover:scale-105">Analytics</a>
<a href="#" class="text-gray-300 hover:text-white transition duration-300 ease-in-out transform hover:scale-105">Settings</a>
</div>
<div class="md:hidden flex items-center">
<button class="text-gray-300 focus:outline-none">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
</svg>
</button>
</div>
</div>
<div class="mt-4 md:hidden">
<a href="#" class="block text-gray-300 hover:text-white py-2 px-3 rounded-md transition duration-300 ease-in-out transform hover:scale-105">Home</a>
<a href="#" class="block text-gray-300 hover:text-white py-2 px-3 rounded-md transition duration-300 ease-in-out transform hover:scale-105">Reports</a>
<a href="#" class="block text-gray-300 hover:text-white py-2 px-3 rounded-md transition duration-300 ease-in-out transform hover:scale-105">Analytics</a>
<a href="#" class="block text-gray-300 hover:text-white py-2 px-3 rounded-md transition duration-300 ease-in-out transform hover:scale-105">Settings</a>
</div>
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/men/51.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-gray-700 dark:border-gray-300 mr-3">
<div class="text-white">
<p class="text-sm">John Doe</p>
<p class="text-xs text-gray-400">Admin</p>
</div>
</div>
<div class="mt-4 bg-gray-700 dark:bg-gray-800 rounded-lg shadow-md p-4">
<h2 class="text-white text-lg font-semibold">Quick Links</h2>
<ul class="mt-2 space-y-2">
<li><a href="#" class="block text-gray-300 hover:text-white transition duration-300 ease-in-out transform hover:scale-105">Profile</a></li>
<li><a href="#" class="block text-gray-300 hover:text-white transition duration-300 ease-in-out transform hover:scale-105">Messages</a></li>
<li><a href="#" class="block text-gray-300 hover:text-white transition duration-300 ease-in-out transform hover:scale-105">Alerts</a></li>
</ul>
</div>
</nav>Componentes relacionados
Componentes de mejora de la navegación
Un componente simple de mejora de la navegación en modo oscuro para mostrar un portafolio, utilizando Tailwind CSS.
Componentes de mejora de la navegación
Un componente de navegación diseñado con una estética brutalista, con diseños atrevidos, alto contraste y diseños inusuales. Incluye efectos responsivos y admite temas oscuros con CSS.
Componente Componentes de mejora de navegación
Un componente de navegación complejo de estilo brutalista para sitios web corporativos con una combinación de colores análoga, diseño receptivo y compatibilidad con el modo oscuro. Presenta diseños inusuales y alto contraste.