Neon_Glow_Navbar_Music_Audio
Un composant de barre de navigation complexe et réactif pour les plates-formes musicales/audio, avec des effets de néon/lueur et une palette de couleurs neutres et chaudes. Comprend la prise en charge du mode sombre et des éléments interactifs.
HTML Code
<nav class="bg-gradient-to-r from-stone-100 to-amber-50 dark:from-stone-900 dark:to-orange-950/50 shadow-lg px-4 py-3 md:py-4 transition-all duration-300">
<div class="container mx-auto flex items-center justify-between flex-wrap">
<!-- Logo and Home Link -->
<div class="flex items-center flex-shrink-0 text-stone-800 dark:text-orange-100 mr-6">
<svg class="fill-current h-8 w-8 mr-2 drop-shadow-[0_0_5px_rgba(251,191,36,0.7)] dark:drop-shadow-[0_0_8px_rgba(253,186,116,0.9)]" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M12 3a9 9 0 00-9 9c0 4.97 4.03 9 9 9s9-4.03 9-9a9 9 0 00-9-9zm0 16a7 7 0 110-14 7 7 0 010 14zM12 8a1 1 0 00-1 1v4a1 1 0 002 0V9a1 1 0 00-1-1z"/>
</svg>
<span class="font-black text-xl tracking-tight text-stone-800 dark:text-orange-100 drop-shadow-[0_0_5px_rgba(251,191,36,0.7)] dark:drop-shadow-[0_0_8px_rgba(253,186,116,0.9)]">Pulse<span class="text-orange-400 dark:text-amber-300">Tune</span></span>
</div>
<!-- Mobile Menu Button -->
<div class="block lg:hidden">
<button class="flex items-center px-3 py-2 border rounded text-stone-500 border-stone-400 hover:text-orange-600 hover:border-orange-600 dark:text-orange-300 dark:border-orange-400 dark:hover:text-amber-500 dark:hover:border-amber-500 focus:outline-none focus:ring-2 focus:ring-orange-500 dark:focus:ring-amber-400 group">
<svg class="fill-current h-3 w-3 drop-shadow-[0_0_3px_rgba(251,191,36,0.7)] dark:drop-shadow-[0_0_5px_rgba(253,186,116,0.9)] group-hover:text-orange-600 dark:group-hover:text-amber-500" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
</button>
</div>
<!-- Nav Links (hidden by default on mobile, shown on large screens) -->
<div class="w-full flex-grow lg:flex lg:items-center lg:w-auto hidden transition-all duration-300" data-target-id="navbar-menu">
<div class="text-sm lg:flex-grow mt-4 lg:mt-0">
<a href="#" class="block mt-4 lg:inline-block lg:mt-0 px-4 py-2 text-stone-700 dark:text-orange-200 hover:text-orange-600 dark:hover:text-amber-400 mr-4 font-medium transition-colors duration-200 relative group">
Home
<span class="absolute inset-x-0 bottom-0 h-0.5 bg-orange-400 dark:bg-amber-300 origin-left transform scale-x-0 transition-transform duration-300 group-hover:scale-x-100 glow-on-hover"></span>
</a>
<a href="#" class="block mt-4 lg:inline-block lg:mt-0 px-4 py-2 text-stone-700 dark:text-orange-200 hover:text-orange-600 dark:hover:text-amber-400 mr-4 font-medium transition-colors duration-200 relative group">
Browse
<span class="absolute inset-x-0 bottom-0 h-0.5 bg-orange-400 dark:bg-amber-300 origin-left transform scale-x-0 transition-transform duration-300 group-hover:scale-x-100 glow-on-hover"></span>
</a>
<a href="#" class="block mt-4 lg:inline-block lg:mt-0 px-4 py-2 text-stone-700 dark:text-orange-200 hover:text-orange-600 dark:hover:text-amber-400 mr-4 font-medium transition-colors duration-200 relative group">
Playlists
<span class="absolute inset-x-0 bottom-0 h-0.5 bg-orange-400 dark:bg-amber-300 origin-left transform scale-x-0 transition-transform duration-300 group-hover:scale-x-100 glow-on-hover"></span>
</a>
<a href="#" class="block mt-4 lg:inline-block lg:mt-0 px-4 py-2 text-stone-700 dark:text-orange-200 hover:text-orange-600 dark:hover:text-amber-400 font-medium transition-colors duration-200 relative group">
Radio
<span class="absolute inset-x-0 bottom-0 h-0.5 bg-orange-400 dark:bg-amber-300 origin-left transform scale-x-0 transition-transform duration-300 group-hover:scale-x-100 glow-on-hover"></span>
</a>
</div>
<!-- Search Bar and User Profile -->
<div class="flex items-center mt-4 lg:mt-0 space-x-4">
<!-- Search Bar -->
<div class="relative">
<input type="text" placeholder="Search music..." class="bg-stone-50 dark:bg-orange-900 border border-stone-300 dark:border-orange-800 rounded-full py-2 pl-10 pr-4 text-sm text-stone-800 dark:text-orange-100 focus:outline-none focus:ring-2 focus:ring-orange-400 dark:focus:ring-amber-300 focus:border-transparent transition-all duration-200 shadow-sm drop-shadow-[0_0_3px_rgba(251,191,36,0.3)] dark:drop-shadow-[0_0_6px_rgba(253,186,116,0.6)]">
<svg class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-stone-400 dark:text-orange-400" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
</div>
<!-- User Profile Dropdown -->
<div class="relative group">
<button class="flex items-center space-x-2 text-stone-700 dark:text-orange-200 focus:outline-none">
<img src="https://randomuser.me/api/portraits/women/12.jpg" alt="User Avatar" class="w-9 h-9 rounded-full border-2 border-orange-400 dark:border-amber-300 glow-on-pfp transition-transform duration-200 hover:scale-105">
<span class="hidden md:block font-medium text-sm text-stone-700 dark:text-orange-200">Jane Doe</span>
<svg class="h-4 w-4 ml-1 text-stone-500 dark:text-orange-300 group-hover:rotate-180 transition-transform duration-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
<!-- Dropdown Menu -->
<div class="absolute right-0 mt-2 w-48 bg-stone-50 dark:bg-orange-900 rounded-md shadow-lg py-1 z-20 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform scale-95 group-hover:scale-100 origin-top-right border border-stone-200 dark:border-orange-850">
<a href="#" class="block px-4 py-2 text-sm text-stone-700 dark:text-orange-200 hover:bg-stone-100 dark:hover:bg-orange-800 transition-colors duration-200">Profile</a>
<a href="#" class="block px-4 py-2 text-sm text-stone-700 dark:text-orange-200 hover:bg-stone-100 dark:hover:bg-orange-800 transition-colors duration-200">Settings</a>
<div class="border-t border-stone-200 dark:border-orange-800 my-1"></div>
<a href="#" class="block px-4 py-2 text-sm text-stone-700 dark:text-orange-200 hover:bg-stone-100 dark:hover:bg-orange-800 transition-colors duration-200">Sign Out</a>
</div>
</div>
<!-- Dark Mode Toggle -->
<button id="dark-mode-toggle" aria-label="Toggle dark mode" class="p-2 rounded-full text-stone-600 dark:text-orange-300 bg-stone-100 dark:bg-orange-800 hover:bg-stone-200 dark:hover:bg-orange-700 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-orange-400 dark:focus:ring-amber-300 drop-shadow-[0_0_3px_rgba(251,191,36,0.3)] dark:drop-shadow-[0_0_6px_rgba(253,186,116,0.6)]">
<svg class="h-5 w-5 hidden dark:block" fill="currentColor" viewBox="0 0 20 20">
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
</svg>
<svg class="h-5 w-5 dark:hidden" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.459 4.368A5.99 5.99 0 0110 18a5.99 5.99 0 01-4.541-2.368l-.707.707a1 1 0 001.414 1.414L10 18.414l3.828 3.828a1 1 0 001.414-1.414l-.707-.707zM18 10a1 1 0 01-1 1h-1a1 1 0 110-2h1a1 1 0 011 1zM2 10a1 1 0 011-1h1a1 1 0 110 2H3a1 1 0 01-1-1zm15.364 6.364l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4.636 4.636l-.707-.707a1 1 0 011.414-1.414l.707.707a1 1 0 01-1.414 1.414z"></path>
</svg>
</button>
</div>
</div>
</div>
</nav>
<style>
/* This CSS is for demonstration of glow effects where Tailwind classes aren't sufficient. */
/* In a real project, consider integrating these via plugins if needed or as direct CSS for unique effects. */
.glow-on-hover {
box-shadow: 0 0 5px rgba(251, 191, 36, 0.5), 0 0 10px rgba(251, 191, 36, 0.3);
transition: all 0.3s ease-in-out;
}
.dark .glow-on-hover {
box-shadow: 0 0 8px rgba(253, 186, 116, 0.7), 0 0 15px rgba(253, 186, 116, 0.5);
}
.group:hover .glow-on-hover {
box-shadow: 0 0 8px rgba(251, 191, 36, 0.8), 0 0 15px rgba(251, 191, 36, 0.5);
}
.dark .group:hover .glow-on-hover {
box-shadow: 0 0 10px rgba(253, 186, 116, 0.9), 0 0 20px rgba(253, 186, 116, 0.7);
}
.glow-on-pfp {
box-shadow: 0 0 8px rgba(251, 191, 36, 0.6);
}
.dark .glow-on-pfp {
box-shadow: 0 0 10px rgba(253, 186, 116, 0.8);
}
.dark .glow-on-pfp {
filter: drop-shadow(0 0 8px rgba(253, 186, 116, 0.8));
}
/* Basic JS for mobile menu and dark mode toggle */
/* Add this script in your actual HTML, likely at the end of body */
/*
<script>
document.addEventListener('DOMContentLoaded', () => {
const mobileMenuButton = document.querySelector('button[aria-label="Toggle navigation"]');
const navbarMenu = document.querySelector('[data-target-id="navbar-menu"]');
if (mobileMenuButton && navbarMenu) {
mobileMenuButton.addEventListener('click', () => {
navbarMenu.classList.toggle('hidden');
});
}
const darkModeToggle = document.getElementById('dark-mode-toggle');
if (darkModeToggle) {
darkModeToggle.addEventListener('click', () => {
document.documentElement.classList.toggle('dark');
localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light');
});
// Check for saved theme in localStorage
if (localStorage.getItem('theme') === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
}
});
</script>
*/
</style>
Composants associés
Cyberpunk_Finance_Navbar
Une barre de navigation simple et réactive sur le thème du cyberpunk pour les applications financières/bancaires, avec un arrière-plan sombre, des accents dégradés lumineux et la prise en charge du mode sombre.
Luxury_Premium_Dating_Social_NavBar
Une barre de navigation de style luxe/premium pour les plateformes de rencontres/sociales, avec une typographie élégante, une palette de couleurs à contraste élevé et un design réactif avec prise en charge du mode sombre. Comprend des éléments interactifs tels qu’un avatar de profil et une icône de notification.
3D_Corporate_Blues_Food_Restaurant_Nav
Une barre de navigation complexe, inspirée de la 3D, pour les sites Web de restauration, avec un blues d’entreprise et une réactivité totale avec prise en charge du mode sombre. Intègre des éléments tels qu’un logo, des liens de navigation, une barre de recherche, un avatar d’utilisateur et un panier.