Monospace_Developer_Simple_Finance_Navigation
Un componente de navegación simple, limpio e inspirado en el código para interfaces financieras/bancarias, con fuentes monoespaciadas, tonos cálidos al atardecer y capacidad de respuesta total con soporte para modo oscuro.
Código HTML
<nav class="bg-orange-500 dark:bg-gray-900 shadow-md font-mono">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<div class="flex items-center">
<div class="flex-shrink-0">
<a href="#" class="text-orange-900 dark:text-orange-400 text-2xl font-bold tracking-tight">FIJI.DEV</a>
</div>
<div class="hidden md:block">
<div class="ml-10 flex items-baseline space-x-4">
<a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-orange-800 dark:text-gray-300 hover:bg-orange-600 dark:hover:bg-gray-800 hover:text-white transition-colors duration-200">Dashboard</a>
<a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-orange-800 dark:text-gray-300 hover:bg-orange-600 dark:hover:bg-gray-800 hover:text-white transition-colors duration-200">Transactions</a>
<a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-orange-800 dark:text-gray-300 hover:bg-orange-600 dark:hover:bg-gray-800 hover:text-white transition-colors duration-200">Accounts</a>
<a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-orange-800 dark:text-gray-300 hover:bg-orange-600 dark:hover:bg-gray-800 hover:text-white transition-colors duration-200">Settings</a>
</div>
</div>
</div>
<div class="hidden md:block">
<div class="ml-4 flex items-center md:ml-6">
<button type="button" class="p-1 rounded-full text-orange-800 dark:text-gray-400 hover:text-white dark:hover:text-white hover:bg-orange-600 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-orange-500 dark:focus:ring-offset-gray-900 focus:ring-white transition-colors duration-200">
<span class="sr-only">View notifications</span>
<!-- Heroicon bell -->
<svg class="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="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
</svg>
</button>
<!-- Profile dropdown -->
<div class="ml-3 relative">
<div>
<button type="button" class="max-w-xs bg-orange-600 dark:bg-gray-800 rounded-full flex items-center text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-orange-500 dark:focus:ring-offset-gray-900 focus:ring-white" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
<span class="sr-only">Open user menu</span>
<img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User avatar">
</button>
</div>
<!--
Dropdown menu, show/hide based on menu state.
Entering: "transition ease-out duration-100"
From: "transform opacity-0 scale-95"
To: "transform opacity-100 scale-100"
Leaving: "transition ease-in duration-75"
From: "transform opacity-100 scale-100"
To: "transform opacity-0 scale-95"
-->
<!-- Placeholder for dropdown content, not implemented as per JSON requirement for pure HTML/CSS -->
</div>
</div>
</div>
<!-- Mobile menu button -->
<div class="-mr-2 flex md:hidden">
<button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-orange-800 dark:text-gray-400 hover:text-white dark:hover:text-white hover:bg-orange-600 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-orange-500 dark:focus:ring-offset-gray-900 focus:ring-white" aria-controls="mobile-menu" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<!-- Icon when menu is closed. -->
<!-- Heroicon hamburger menu -->
<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 close menu -->
<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. Only for layout demonstration; requires JS to toggle. -->
<div class="md:hidden" id="mobile-menu">
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-orange-800 dark:text-gray-300 hover:bg-orange-600 dark:hover:bg-gray-800 hover:text-white transition-colors duration-200">Dashboard</a>
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-orange-800 dark:text-gray-300 hover:bg-orange-600 dark:hover:bg-gray-800 hover:text-white transition-colors duration-200">Transactions</a>
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-orange-800 dark:text-gray-300 hover:bg-orange-600 dark:hover:bg-gray-800 hover:text-white transition-colors duration-200">Accounts</a>
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-orange-800 dark:text-gray-300 hover:bg-orange-600 dark:hover:bg-gray-800 hover:text-white transition-colors duration-200">Settings</a>
</div>
<div class="pt-4 pb-3 border-t border-orange-700 dark:border-gray-700">
<div class="flex items-center px-5">
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User avatar">
</div>
<div class="ml-3">
<div class="text-base font-medium leading-none text-orange-900 dark:text-white">John Doe</div>
<div class="text-sm font-medium leading-none text-orange-800 dark:text-gray-400">[email protected]</div>
</div>
<button type="button" class="ml-auto flex-shrink-0 bg-orange-600 dark:bg-gray-800 p-1 rounded-full text-orange-800 dark:text-gray-400 hover:text-white dark:hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-orange-500 dark:focus:ring-offset-gray-900 focus:ring-white transition-colors duration-200">
<span class="sr-only">View notifications</span>
<!-- Heroicon bell -->
<svg class="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="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
</svg>
</button>
</div>
<div class="mt-3 px-2 space-y-1">
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-orange-800 dark:text-gray-300 hover:bg-orange-600 dark:hover:bg-gray-800 hover:text-white transition-colors duration-200">Your Profile</a>
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-orange-800 dark:text-gray-300 hover:bg-orange-600 dark:hover:bg-gray-800 hover:text-white transition-colors duration-200">Settings</a>
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-orange-800 dark:text-gray-300 hover:bg-orange-600 dark:hover:bg-gray-800 hover:text-white transition-colors duration-200">Sign out</a>
</div>
</div>
</div>
</nav>Componentes relacionados
Componentes de navegación
Un componente de navegación minimalista para un sitio web de comercio electrónico, con un logotipo, una barra de búsqueda, enlaces de navegación, un icono de carrito de compras y un avatar de usuario que utiliza Tailwind CSS. Este componente es compatible con el diseño responsivo y el modo oscuro.
Componente de componentes de navegación
Un componente de navegación complejo y receptivo para paneles, con microinteracciones y un esquema de color análogo, con soporte para modo oscuro. Utiliza Tailwind CSS para el estilo e incluye elementos interactivos sin depender de JavaScript.
Componente de componentes de navegación
Un componente de navegación responsivo con soporte de modo oscuro usando Tailwind CSS. Incluye un logotipo, enlaces de navegación y un botón de llamada a la acción.