Barra de navegación Skeuomorphic
Un componente de barra de navegación responsivo diseñado en un estilo skeuomórfico con soporte de temas oscuros mediante Tailwind CSS.
Código HTML
<nav class="bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-lg">
<div class="container mx-auto flex justify-between items-center">
<div class="flex items-center space-x-4">
<img src="https://picsum.photos/50/50?random=1" alt="Logo" class="h-10 rounded-full">
<span class="text-xl font-bold dark:text-white">Brand</span>
</div>
<div class="hidden md:flex space-x-4">
<a href="#" class="text-gray-800 dark:text-gray-200 p-2 rounded-lg transition duration-200 hover:bg-gray-300 dark:hover:bg-gray-700">
Home
</a>
<a href="#" class="text-gray-800 dark:text-gray-200 p-2 rounded-lg transition duration-200 hover:bg-gray-300 dark:hover:bg-gray-700">
About
</a>
<a href="#" class="text-gray-800 dark:text-gray-200 p-2 rounded-lg transition duration-200 hover:bg-gray-300 dark:hover:bg-gray-700">
Services
</a>
<a href="#" class="text-gray-800 dark:text-gray-200 p-2 rounded-lg transition duration-200 hover:bg-gray-300 dark:hover:bg-gray-700">
Contact
</a>
</div>
<div class="md:hidden flex items-center">
<button class="text-gray-800 dark:text-gray-200 p-2 rounded-lg focus:outline-none">
<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:hidden">
<div class="flex flex-col space-y-1 mt-2">
<a href="#" class="text-gray-800 dark:text-gray-200 p-2 rounded-lg transition duration-200 hover:bg-gray-300 dark:hover:bg-gray-700">
Home
</a>
<a href="#" class="text-gray-800 dark:text-gray-200 p-2 rounded-lg transition duration-200 hover:bg-gray-300 dark:hover:bg-gray-700">
About
</a>
<a href="#" class="text-gray-800 dark:text-gray-200 p-2 rounded-lg transition duration-200 hover:bg-gray-300 dark:hover:bg-gray-700">
Services
</a>
<a href="#" class="text-gray-800 dark:text-gray-200 p-2 rounded-lg transition duration-200 hover:bg-gray-300 dark:hover:bg-gray-700">
Contact
</a>
</div>
</div>
</nav>
Componentes relacionados
Artistic_Sepia_Navigation_Bar
Una barra de navegación simple y receptiva con una estética suave, artística y en tonos sepia adecuada para marcas de moda y belleza, incluida la compatibilidad con el modo oscuro.
Cyberpunk_Retro_Food_Navbar
Una barra de navegación simple y receptiva con estética cyberpunk-retro, diseñada para sitios web de comida / restaurantes. Cuenta con fondo oscuro, colores de acento apagados y compatibilidad con el modo oscuro.
Transiciones de degradado/color Barra de navegación del panel de control en escala de grises
Una barra de navegación compleja y receptiva para un tablero, con transiciones de degradado en un esquema de color en escala de grises. Incluye múltiples elementos interactivos y soporte completo para el modo oscuro.