Glassmorphism_Navigation_Simple_Sunset
Un composant de navigation glassmorphism simple et réactif avec des tons crépuscules/chauds, adapté aux sites Web d’entreprise. Dispose d’éléments translucides et prend en charge le mode sombre.
HTML Code
<header class="bg-orange-100 dark:bg-gray-900 shadow-lg">
<nav class="container mx-auto px-4 py-3 flex justify-between items-center">
<a href="#" class="text-xl font-bold text-orange-700 dark:text-orange-300">YourCompany</a>
<div class="hidden md:flex space-x-6">
<a href="#" class="text-orange-600 hover:text-orange-800 dark:text-orange-400 dark:hover:text-amber-200 transition-colors duration-300">Home</a>
<a href="#" class="text-orange-600 hover:text-orange-800 dark:text-orange-400 dark:hover:text-amber-200 transition-colors duration-300">About</a>
<a href="#" class="text-orange-600 hover:text-orange-800 dark:text-orange-400 dark:hover:text-amber-200 transition-colors duration-300">Services</a>
<a href="#" class="text-orange-600 hover:text-orange-800 dark:text-orange-400 dark:hover:text-amber-200 transition-colors duration-300">Contact</a>
</div>
<!-- Mobile menu button -->
<button class="md:hidden focus:outline-none">
<svg class="w-6 h-6 text-orange-700 dark:text-orange-300" 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="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</button>
</nav>
<!-- Mobile menu overlay (can be shown/hidden with JS, but per instructions, we just have structure) -->
<div class="md:hidden fixed top-0 left-0 w-full h-full bg-orange-50 dark:bg-gray-800 bg-opacity-90 dark:bg-opacity-90 backdrop-filter backdrop-blur-md z-50 transform -translate-y-full transition-transform duration-300 ease-in-out">
<div class="flex flex-col items-center justify-center h-full space-y-6">
<a href="#" class="text-2xl text-orange-700 hover:text-orange-900 dark:text-orange-300 dark:hover:text-amber-100 transition-colors duration-300">Home</a>
<a href="#" class="text-2xl text-orange-700 hover:text-orange-900 dark:text-orange-300 dark:hover:text-amber-100 transition-colors duration-300">About</a>
<a href="#" class="text-2xl text-orange-700 hover:text-orange-900 dark:text-orange-300 dark:hover:text-amber-100 transition-colors duration-300">Services</a>
<a href="#" class="text-2xl text-orange-700 hover:text-orange-900 dark:text-orange-300 dark:hover:text-amber-100 transition-colors duration-300">Contact</a>
</div>
</div>
</header>Composants associés
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.
Cyberpunk Météo Navigation
Un composant de navigation simple et réactif sur le thème du cyberpunk pour une application météo, avec des couleurs sourdes et des accents néon, avec prise en charge du mode sombre.
Composants de navigation
Un composant de navigation conçu avec un style brutaliste, avec une palette de couleurs pastel pour les interfaces de médias sociaux, avec une mise en page réactive et une prise en charge du thème sombre.