NeonGlowFooterNavigation
Eine reaktionsschnelle Fußzeilennavigationskomponente mit Neon-/Leuchteffekten, die für Musik-/Audioplattformen entwickelt wurde. Verfügt über ein Schwarz-Weiß-Farbschema mit einer lebendigen Akzentfarbe, Unterstützung für den Dunkelmodus und semantisches HTML.
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>
Verwandte Komponenten
Glassmorphism Graustufen Gesundheitswesen Fußzeile
Eine reaktionsschnelle Fußzeilennavigationskomponente im Glassmorphism-Stil für Anwendungen im Gesundheitswesen/Medizin, die ein Graustufen-Farbschema mit Unterstützung für den Dunkelmodus verwendet. Es verfügt über glasfaserähnliche, durchscheinende Elemente und interaktive Links.
Fußzeilennavigationskomponente - Monospace/Entwicklerstil
Eine komplexe, reaktionsschnelle Fußzeilennavigationskomponente, die für Landwirtschafts-/Landwirtschafts-Websites entwickelt wurde und eine Monospace-/Entwickler-Ästhetik mit einem Regenbogen-Farbschema mit Farbverlauf und Unterstützung für den Dunkelmodus bietet.
Komponente "Fußzeilennavigation"
Eine reaktionsschnelle Fußzeilennavigationskomponente mit einem Glasmorphismus-Stil mit mattglasähnlichen, durchscheinenden Elementen und Unschärfeeffekten. Es unterstützt den Dunkelmodus und enthält Platzhalterbilder.