NeonBaglioPiè di paginaNavigazione
Un componente di navigazione a piè di pagina reattivo con effetti neon/bagliore, progettato per piattaforme musicali/audio. Presenta una combinazione di colori in bianco e nero con un vivace colore d'accento, supporto per la modalità oscura e HTML semantico.
Codice HTML
<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>Componenti correlati
Brutalismo E-commerce Footer Navigation
Un componente di navigazione a piè di pagina semplice e brutale per l'e-commerce, con colori pastello e supporto per la modalità scura.
Retro_Earth_Tone_Portfolio_Footer
Un componente di navigazione a piè di pagina reattivo e a tema retrò per un sito web di portfolio, con i toni della terra e il supporto della modalità scura. Progettato pensando all'estetica degli anni '80/'90, offre un tocco nostalgico.
Componente di navigazione del piè di pagina
Un componente di navigazione a piè di pagina reattivo per dashboard con supporto per temi scuri, con microinterazioni sui passaggi del mouse sui collegamenti utilizzando colori triadici ed elementi complessi. Niente JavaScript, solo HTML con Tailwind CSS.