NéonGlowFooterNavigation
Un composant de navigation de pied de page réactif avec des effets de néon/lueur, conçu pour les plateformes musicales/audio. Dispose d’une palette de couleurs noir et blanc avec une couleur d’accentuation vibrante, la prise en charge du mode sombre et le HTML sémantique.
HTML Code
<footer class="bg-zinc-950 text-gray-400 py-8 px-4 dark:bg-black w-full shadow-2xl shadow-fuchsia-500/20">
<div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-8 ">
<!-- Section 1: Logo & Slogan -->
<div class="col-span-full md:col-span-1 lg:col-span-1 flex flex-col items-center md:items-start mb-6 md:mb-0">
<a href="#" class="text-fuchsia-400 text-3xl font-bold tracking-wide relative
before:content-[''] before:absolute before:-inset-0.5 before:block before:bg-fuchsia-500/30 before:rounded-lg before:blur-sm before:animate-pulse
after:content-[''] after:absolute after:-inset-0.5 after:block after:bg-fuchsia-500/10 after:rounded-lg after:blur-md after:animate-pulse">
<span class="relative z-10">BeatWave</span>
</a>
<p class="mt-4 text-sm text-gray-500 dark:text-gray-600">Ignite Your Sound</p>
<div class="flex space-x-4 mt-6">
<a href="#" class="text-gray-500 hover:text-fuchsia-400 transition-colors duration-300 relative group">
<svg class="w-6 h-6 group-hover:drop-shadow-[0_0_8px_rgba(236,72,153,0.8)]" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22H12c5.523 0 10-4.477 10-10Z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="text-gray-500 hover:text-fuchsia-400 transition-colors duration-300 relative group">
<svg class="w-6 h-6 group-hover:drop-shadow-[0_0_8px_rgba(236,72,153,0.8)]" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M19.5 2h-15A2.5 2.5 0 0 0 2 4.5v15A2.5 2.5 0 0 0 4.5 22h15a2.5 2.5 0 0 0 2.5-2.5v-15A2.5 2.5 0 0 0 19.5 2ZM17.1 v-2.2H14.9c-.83 0-1.1.33-1.1 1.07v1.13h2.4l-.32 2.3h-2.08v6.7h-2.73v-6.6a1.1 1.1 0 0 1-1.12-1.1c0-.49 1.12-1.07 1.12-2.3v-2.3c0-2.45 1.5-3.8 3.75-3.8 1.05 0 2.2.14 2.2.14v2.5Z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="text-gray-500 hover:text-fuchsia-400 transition-colors duration-300 relative group">
<svg class="w-6 h-6 group-hover:drop-shadow-[0_0_8px_rgba(236,72,153,0.8)]" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M.931 7.28c-.378-.58-.707-.58-.87-.312C-.07 7.218.006 7.636.006 8.016v8.435c0 .38-.076.798-.016.963.163.267.492.267.87.312l4.898-.052 8.358 8.36c.58.58 1.52.58 2.1 0l6.21-6.21c.58-.58.58-1.52 0-2.1l-6.21-6.21-8.358-8.36L.93.948h.001Z" clip-rule="evenodd" />
</svg>
</a>
</div>
</div>
<!-- Section 2: Discover -->
<div>
<h3 class="text-lg font-semibold text-white dark:text-gray-300 mb-4 relative
before:absolute before:left-0 before:bottom-0 before:w-full before:h-0.5 before:bg-fuchsia-400 before:scale-x-0 before:transition-transform before:duration-300 before:origin-left hover:before:scale-x-100">
Discover
</h3>
<ul class="space-y-3">
<li><a href="#" class="text-gray-500 hover:text-fuchsia-400 transition-all duration-300 relative group">
<span class="relative z-10">New Releases</span>
<span class="absolute inset-0 bg-fuchsia-500/20 opacity-0 group-hover:opacity-100 group-hover:blur-sm transition-opacity duration-300 -z-0 rounded-sm"></span>
</a></li>
<li><a href="#" class="text-gray-500 hover:text-fuchsia-400 transition-all duration-300 relative group">
<span class="relative z-10">Top Charts</span>
<span class="absolute inset-0 bg-fuchsia-500/20 opacity-0 group-hover:opacity-100 group-hover:blur-sm transition-opacity duration-300 -z-0 rounded-sm"></span>
</a></li>
<li><a href="#" class="text-gray-500 hover:text-fuchsia-400 transition-all duration-300 relative group">
<span class="relative z-10">Genres</span>
<span class="absolute inset-0 bg-fuchsia-500/20 opacity-0 group-hover:opacity-100 group-hover:blur-sm transition-opacity duration-300 -z-0 rounded-sm"></span>
</a></li>
<li><a href="#" class="text-gray-500 hover:text-fuchsia-400 transition-all duration-300 relative group">
<span class="relative z-10">Artists</span>
<span class="absolute inset-0 bg-fuchsia-500/20 opacity-0 group-hover:opacity-100 group-hover:blur-sm transition-opacity duration-300 -z-0 rounded-sm"></span>
</a></li>
</ul>
</div>
<!-- Section 3: Community -->
<div>
<h3 class="text-lg font-semibold text-white dark:text-gray-300 mb-4 relative
before:absolute before:left-0 before:bottom-0 before:w-full before:h-0.5 before:bg-fuchsia-400 before:scale-x-0 before:transition-transform before:duration-300 before:origin-left hover:before:scale-x-100">
Community
</h3>
<ul class="space-y-3">
<li><a href="#" class="text-gray-500 hover:text-fuchsia-400 transition-all duration-300 relative group">
<span class="relative z-10">Forums</span>
<span class="absolute inset-0 bg-fuchsia-500/20 opacity-0 group-hover:opacity-100 group-hover:blur-sm transition-opacity duration-300 -z-0 rounded-sm"></span>
</a></li>
<li><a href="#" class="text-gray-500 hover:text-fuchsia-400 transition-all duration-300 relative group">
<span class="relative z-10">Support</span>
<span class="absolute inset-0 bg-fuchsia-500/20 opacity-0 group-hover:opacity-100 group-hover:blur-sm transition-opacity duration-300 -z-0 rounded-sm"></span>
</a></li>
<li><a href="#" class="text-gray-500 hover:text-fuchsia-400 transition-all duration-300 relative group">
<span class="relative z-10">Help Center</span>
<span class="absolute inset-0 bg-fuchsia-500/20 opacity-0 group-hover:opacity-100 group-hover:blur-sm transition-opacity duration-300 -z-0 rounded-sm"></span>
</a></li>
</ul>
</div>
<!-- Section 4: Company -->
<div>
<h3 class="text-lg font-semibold text-white dark:text-gray-300 mb-4 relative
before:absolute before:left-0 before:bottom-0 before:w-full before:h-0.5 before:bg-fuchsia-400 before:scale-x-0 before:transition-transform before:duration-300 before:origin-left hover:before:scale-x-100">
Company
</h3>
<ul class="space-y-3">
<li><a href="#" class="text-gray-500 hover:text-fuchsia-400 transition-all duration-300 relative group">
<span class="relative z-10">About Us</span>
<span class="absolute inset-0 bg-fuchsia-500/20 opacity-0 group-hover:opacity-100 group-hover:blur-sm transition-opacity duration-300 -z-0 rounded-sm"></span>
</a></li>
<li><a href="#" class="text-gray-500 hover:text-fuchsia-400 transition-all duration-300 relative group">
<span class="relative z-10">Careers</span>
<span class="absolute inset-0 bg-fuchsia-500/20 opacity-0 group-hover:opacity-100 group-hover:blur-sm transition-opacity duration-300 -z-0 rounded-sm"></span>
</a></li>
<li><a href="#" class="text-gray-500 hover:text-fuchsia-400 transition-all duration-300 relative group">
<span class="relative z-10">Press</span>
<span class="absolute inset-0 bg-fuchsia-500/20 opacity-0 group-hover:opacity-100 group-hover:blur-sm transition-opacity duration-300 -z-0 rounded-sm"></span>
</a></li>
<li><a href="#" class="text-gray-500 hover:text-fuchsia-400 transition-all duration-300 relative group">
<span class="relative z-10">Terms of Service</span>
<span class="absolute inset-0 bg-fuchsia-500/20 opacity-0 group-hover:opacity-100 group-hover:blur-sm transition-opacity duration-300 -z-0 rounded-sm"></span>
</a></li>
</ul>
</div>
<!-- Section 5: Newsletter Signup -->
<div class="col-span-full md:col-span-3 lg:col-span-1">
<h3 class="text-lg font-semibold text-white dark:text-gray-300 mb-4 relative
before:absolute before:left-0 before:bottom-0 before:w-full before:h-0.5 before:bg-fuchsia-400 before:scale-x-0 before:transition-transform before:duration-300 before:origin-left hover:before:scale-x-100">
Stay Tuned
</h3>
<p class="text-sm text-gray-500 dark:text-gray-600 mb-4">Subscribe to our newsletter for the latest updates and exclusive content.</p>
<form class="flex flex-col sm:flex-row gap-2">
<label for="email-address" class="sr-only">Email address</label>
<input id="email-address" name="email" type="email" autocomplete="email" required
class="w-full flex-grow px-4 py-2 bg-zinc-800 border-2 border-zinc-700 rounded-md text-white placeholder-gray-500
focus:outline-none focus:ring-2 focus:ring-fuchsia-500 focus:border-transparent
shadow-inner shadow-zinc-700/50 dark:bg-zinc-900 dark:border-zinc-800 dark:shadow-zinc-800/50"
placeholder="Enter your email">
<button type="submit"
class="px-6 py-2 bg-fuchsia-600 text-white font-medium rounded-md
hover:bg-fuchsia-700 focus:outline-none focus:ring-2 focus:ring-fuchsia-500 focus:ring-offset-2 focus:ring-offset-zinc-950
transition-all duration-300 relative overflow-hidden group
shadow-lg shadow-fuchsia-500/30
dark:shadow-fuchsia-500/40">
<span class="relative z-10">Subscribe</span>
<span class="absolute inset-0 bg-gradient-to-r from-fuchsia-500 to-purple-600 opacity-0 group-hover:opacity-100
blur-sm group-hover:blur-[1px] transition-all duration-300"></span>
</button>
</form>
</div>
</div>
<!-- Copyright -->
<div class="mt-8 pt-8 border-t border-gray-800 text-center text-sm text-gray-500 dark:border-gray-700">
© 2023 BeatWave. All rights reserved.
</div>
</footer>Composants associés
Composant de navigation de pied de page de conception 3D
Un composant de navigation de pied de page de style 3D avec un design réactif et une prise en charge du mode sombre.
Composant de navigation en pied de page
Un composant simple de navigation en pied de page conçu dans un style brutaliste avec une palette de couleurs triadique pour les interfaces de médias sociaux. Il comprend des liens et des images d’avatar, avec prise en charge du mode sombre.
Retro_Jewel_Tone_Dashboard_Footer_Navigation
Un composant de navigation en pied de page réactif pour un tableau de bord, inspiré de l’esthétique rétro/vintage avec des couleurs de bijoux (émeraude, saphir, rubis) et la prise en charge du mode sombre. Il comprend des liens de navigation, des icônes de médias sociaux et des informations sur les droits d’auteur.