Néon Glow Gouvernement Navigation
Un composant de navigation réactif pour les services gouvernementaux/publics avec une lueur néon, une palette de couleurs douces et une prise en charge du mode sombre. Présente des éléments lumineux et lumineux avec des effets d’éclairage vibrants.
HTML Code
<nav class="bg-gradient-to-r from-pink-100 via-purple-100 to-green-100 dark:from-gray-900 dark:via-gray-800 dark:to-teal-950 p-4 shadow-lg">
<div class="container mx-auto flex flex-wrap items-center justify-between">
<!-- Logo/Brand Section -->
<a href="#" class="flex items-center space-x-2 text-lg font-bold text-purple-700 dark:text-cyan-400 group relative">
<svg class="h-8 w-8 text-pink-500 dark:text-teal-400 group-hover:drop-shadow-[0_0_8px_pink] dark:group-hover:drop-shadow-[0_0_8px_teal] transition-all duration-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 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path>
</svg>
<span class="relative z-10 group-hover:drop-shadow-[0_0_8px_rgba(192,38,211,0.8)] dark:group-hover:drop-shadow-[0_0_8px_rgba(45,212,191,0.8)] transition-all duration-300">PublicPulse</span>
<div class="absolute inset-0 bg-transparent rounded-lg blur-sm group-hover:bg-purple-300/30 dark:group-hover:bg-cyan-600/30 transition-all duration-300 scale-x-0 group-hover:scale-x-100 origin-left"></div>
</a>
<!-- Mobile Toggle Button (Hidden on larger screens) -->
<input type="checkbox" id="menu-toggle" class="hidden peer">
<label for="menu-toggle" class="cursor-pointer lg:hidden block text-purple-700 dark:text-cyan-400 focus:outline-none focus:ring-2 focus:ring-purple-500 dark:focus:ring-cyan-500 rounded p-2 relative z-20">
<svg class="h-6 w-6 peer-checked:hidden" 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>
<svg class="h-6 w-6 hidden peer-checked:block" 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="M6 18L18 6M6 6l12 12"></path>
</svg>
</label>
<!-- Navigation Links -->
<div class="w-full lg:flex lg:items-center lg:w-auto mt-4 lg:mt-0 hidden peer-checked:block transition-all duration-500 ease-in-out" id="navbar-default">
<ul class="flex flex-col lg:flex-row lg:space-x-8 text-sm font-medium w-full lg:w-auto">
<li>
<a href="#" class="relative block py-2 px-3 text-pink-600 dark:text-teal-300 rounded hover:bg-pink-200 dark:hover:bg-teal-800 transition-all duration-300 group overflow-hidden focus:outline-none focus:ring-2 focus:ring-pink-500 dark:focus:ring-teal-500">
Home
<span class="absolute inset-0 z-0 bg-gradient-to-r from-pink-300/30 to-purple-300/30 dark:from-teal-600/30 dark:to-cyan-600/30 backdrop-blur-sm scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out origin-left rounded"></span>
<span class="relative z-10 group-hover:drop-shadow-[0_0_8px_pink] dark:group-hover:drop-shadow-[0_0_8px_teal]"></span>
</a>
</li>
<li>
<a href="#" class="relative block py-2 px-3 text-purple-600 dark:text-orange-300 rounded hover:bg-purple-200 dark:hover:bg-orange-800 transition-all duration-300 group overflow-hidden focus:outline-none focus:ring-2 focus:ring-purple-500 dark:focus:ring-orange-500">
Services
<span class="absolute inset-0 z-0 bg-gradient-to-r from-purple-300/30 to-yellow-300/30 dark:from-orange-600/30 dark:to-amber-600/30 backdrop-blur-sm scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out origin-left rounded"></span>
<span class="relative z-10 group-hover:drop-shadow-[0_0_8px_purple] dark:group-hover:drop-shadow-[0_0_8px_orange]"></span>
</a>
</li>
<li>
<a href="#" class="relative block py-2 px-3 text-green-600 dark:text-lime-300 rounded hover:bg-green-200 dark:hover:bg-lime-800 transition-all duration-300 group overflow-hidden focus:outline-none focus:ring-2 focus:ring-green-500 dark:focus:ring-lime-500">
About Us
<span class="absolute inset-0 z-0 bg-gradient-to-r from-green-300/30 to-blue-300/30 dark:from-lime-600/30 dark:to-emerald-600/30 backdrop-blur-sm scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out origin-left rounded"></span>
<span class="relative z-10 group-hover:drop-shadow-[0_0_8px_green] dark:group-hover:drop-shadow-[0_0_8px_lime]"></span>
</a>
</li>
<li>
<a href="#" class="relative block py-2 px-3 text-blue-600 dark:text-cyan-300 rounded hover:bg-blue-200 dark:hover:bg-cyan-800 transition-all duration-300 group overflow-hidden focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-cyan-500">
Contact
<span class="absolute inset-0 z-0 bg-gradient-to-r from-blue-300/30 to-indigo-300/30 dark:from-cyan-600/30 dark:to-sky-600/30 backdrop-blur-sm scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out origin-left rounded"></span>
<span class="relative z-10 group-hover:drop-shadow-[0_0_8px_blue] dark:group-hover:drop-shadow-[0_0_8px_cyan]"></span>
</a>
</li>
<li>
<a href="#" class="relative block py-2 px-3 text-yellow-600 dark:text-amber-300 rounded hover:bg-yellow-200 dark:hover:bg-amber-800 transition-all duration-300 group overflow-hidden focus:outline-none focus:ring-2 focus:ring-yellow-500 dark:focus:ring-amber-500">
FAQ
<span class="absolute inset-0 z-0 bg-gradient-to-r from-yellow-300/30 to-orange-300/30 dark:from-amber-600/30 dark:to-orange-600/30 backdrop-blur-sm scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out origin-left rounded"></span>
<span class="relative z-10 group-hover:drop-shadow-[0_0_8px_yellow] dark:group-hover:drop-shadow-[0_0_8px_amber]"></span>
</a>
</li>
</ul>
</div>
</div>
</nav>Composants associés
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.
Navigation skeuomorphe
Un composant de navigation simple et réactif avec un design skeuomorphique, une palette de couleurs analogue adaptée aux applications de médias sociaux, avec prise en charge du thème sombre.
Composant de navigation cryptographique ludique en niveaux de gris
Un composant de navigation en niveaux de gris ludique et convivial pour les applications de crypto-monnaie et de blockchain, avec des éléments arrondis, des états interactifs, une réactivité totale et une prise en charge du mode sombre.