3D_Candy_Finance_Navigation
Un componente de navegación simple y receptivo para aplicaciones financieras/bancarias, con un esquema de colores dulces/dulces y sutiles elementos de diseño 3D, con soporte para modo oscuro.
Código HTML
<nav class="bg-gradient-to-r from-pink-300 via-purple-300 to-blue-300 dark:from-purple-900 dark:via-indigo-900 dark:to-gray-900 shadow-lg relative z-10 font-sans">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex items-center">
<a href="#" class="flex-shrink-0 flex items-center">
<svg class="h-8 w-8 text-white dark:text-pink-300 mr-2 drop-shadow-md" 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="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"></path>
</svg>
<span class="text-white dark:text-white text-2xl font-extrabold tracking-tight drop-shadow-md">CandyBank</span>
</a>
</div>
<div class="hidden sm:ml-6 sm:flex sm:space-x-8">
<a href="#" class="relative inline-flex items-center px-1 pt-1 text-white dark:text-gray-300 text-lg font-medium hover:text-white dark:hover:text-pink-300 transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:scale-105 group">
Home
<div class="absolute bottom-0 left-0 w-full h-0.5 bg-white dark:bg-pink-400 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
</a>
<a href="#" class="relative inline-flex items-center px-1 pt-1 text-white dark:text-gray-300 text-lg font-medium hover:text-white dark:hover:text-pink-300 transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:scale-105 group">
Accounts
<div class="absolute bottom-0 left-0 w-full h-0.5 bg-white dark:bg-pink-400 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
</a>
<a href="#" class="relative inline-flex items-center px-1 pt-1 text-white dark:text-gray-300 text-lg font-medium hover:text-white dark:hover:text-pink-300 transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:scale-105 group">
Services
<div class="absolute bottom-0 left-0 w-full h-0.5 bg-white dark:bg-pink-400 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
</a>
<a href="#" class="relative inline-flex items-center px-1 pt-1 text-white dark:text-gray-300 text-lg font-medium hover:text-white dark:hover:text-pink-300 transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:scale-105 group">
Contact
<div class="absolute bottom-0 left-0 w-full h-0.5 bg-white dark:bg-pink-400 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
</a>
</div>
<div class="-mr-2 flex items-center sm:hidden">
<!-- Mobile menu button -->
<button type="button" class="bg-pink-400 dark:bg-indigo-700 inline-flex items-center justify-center p-2 rounded-md text-white dark:text-gray-300 hover:text-white hover:bg-pink-500 dark:hower:bg-indigo-800 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white dark:focus:ring-pink-300 drop-shadow-md" aria-controls="mobile-menu" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<!-- Icon when menu is closed. -->
<!--
Heroicon name: outline/menu
Menu open: "hidden", Menu closed: "block"
-->
<svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
<!-- Icon when menu is open. -->
<!--
Heroicon name: outline/x
Menu open: "block", Menu closed: "hidden"
-->
<svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>
<!-- Mobile menu, show/hide based on menu state. -->
<div class="sm:hidden hidden" id="mobile-menu">
<div class="px-2 pt-2 pb-3 space-y-1">
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white dark:text-gray-300 bg-pink-400 dark:bg-purple-700 hover:bg-pink-500 hover:text-white dark:hover:bg-purple-800 transition duration-300 ease-in-out transform hover:scale-105">
Home
</a>
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white dark:text-gray-300 hover:bg-pink-400 hover:text-white dark:hover:bg-purple-700 transition duration-300 ease-in-out transform hover:scale-105">
Accounts
</a>
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white dark:text-gray-300 hover:bg-pink-400 hover:text-white dark:hover:bg-purple-700 transition duration-300 ease-in-out transform hover:scale-105">
Services
</a>
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white dark:text-gray-300 hover:bg-pink-400 hover:text-white dark:hover:bg-purple-700 transition duration-300 ease-in-out transform hover:scale-105">
Contact
</a>
</div>
</div>
</nav>Componentes relacionados
Barra de navegación de comercio electrónico
Neumorfismo Barra de navegación de comercio electrónico con tonos tierra
Componente de navegación skeuomórfica
Un componente de navegación esqueuomórfico diseñado para imitar elementos del mundo real, como un panel de control físico o un panel de control. Cuenta con un diseño responsivo, efectos de desplazamiento que simulan pulsaciones de botones físicos y compatibilidad con temas oscuros. La navegación incluye sombras, degradados y texturas sutiles para crear una apariencia táctil en 3D que recuerda a las interfaces físicas.
Componente de navegación de lujo
Un componente de navegación elegante y receptivo para marcas de moda y belleza, con un sofisticado diseño en blanco y negro con un color de acento brillante, compatibilidad con el modo oscuro y elementos mínimos.