Componentes de mejora de la navegación
Un componente de navegación diseñado con skeuomorfismo, con elementos digitales que imitan a sus homólogos del mundo real. Está diseñado con Tailwind CSS con efectos responsivos y soporte para temas oscuros.
Código HTML
<nav class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-4 max-w-screen-lg mx-auto transition-all duration-300 ease-in-out">
<div class="flex items-center justify-between">
<div class="flex items-center space-x-4">
<img src="https://picsum.photos/50/50" alt="Logo" class="rounded-full shadow-md">
<h1 class="text-xl font-bold text-gray-800 dark:text-white">My Website</h1>
</div>
<div class="space-x-4 hidden md:flex">
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300">Home</a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300">About</a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300">Services</a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300">Contact</a>
</div>
<div class="md:hidden">
<button class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
</svg>
</button>
</div>
</div>
<div class="md:flex md:items-center mt-4 space-x-4 hidden">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-10 h-10 shadow-md">
<span class="text-gray-800 dark:text-white">User Name</span>
</div>
</nav>
<!-- Mobile Menu -->
<div class="md:hidden bg-white dark:bg-gray-800 shadow-lg rounded-lg p-4 mt-2 transition-all duration-300 ease-in-out">
<a href="#" class="block text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300 mb-2">Home</a>
<a href="#" class="block text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300 mb-2">About</a>
<a href="#" class="block text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300 mb-2">Services</a>
<a href="#" class="block text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300">Contact</a>
</div>
<style>
/* Dark mode support */
@media (prefers-color-scheme: dark) {
body {
background-color: #1a202c;
color: white;
}
}
</style>Componentes relacionados
Componentes de mejora de la navegación
Una barra de navegación Retro/Vintage con un diseño complejo para sitios web profesionales, con una combinación de colores triádica y compatibilidad con temas oscuros receptivos.
Componentes de mejora de la navegación
Un componente de navegación responsivo con un estilo con una estética retro/vintage, adecuado para aplicaciones de comercio electrónico, con soporte para temas oscuros e interactividad moderada.
Componente de mejora de la navegación
Un componente de navegación responsivo diseñado para una cartera, que utiliza un estilo brutalista con un esquema de color pastel y soporte para modo oscuro.