Monospace_Developer_Simple_Finance_Navigation
Un composant de navigation simple, épuré et inspiré du code pour les interfaces financières/bancaires, avec des polices monospaces, des tons chauds de coucher de soleil et une réactivité totale avec prise en charge du mode sombre.
HTML Code
<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>Composants associés
Composant Composants de navigation
Un composant de navigation réactif avec des couleurs vives et des micro-interactions, conçu pour un portefeuille.
Swiss_International_Navigation_Fashion_Beauty
Un composant de navigation complexe et réactif pour les marques de mode/beauté, adhérant aux principes de conception de la typographie suisse/internationale avec une palette de couleurs bleues d’entreprise. Comprend la prise en charge du mode sombre et plusieurs éléments interactifs.
Navigation rétro sur les réseaux sociaux
Composant de navigation réactif avec mode sombre pour les médias sociaux (rétro/vintage, tons terreux, complexité modérée)