Neon_Glow_Header_Component
Eine reaktionsschnelle Header-Komponente für SaaS-Anwendungen mit Neon-/Leuchteffekten und einem Bonbon-/Süßigkeiten-Farbschema mit Unterstützung für den Dunkelmodus und interaktiven Elementen.
HTML-Code
<header class="bg-gradient-to-r from-pink-300 to-purple-400 dark:from-gray-900 dark:to-purple-950 shadow-lg relative overflow-hidden">
<div class="absolute inset-0 pointer-events-none"><div class="absolute inset-0 bg-white opacity-10 dark:opacity-5 blur-3xl"></div></div>
<div class="container mx-auto px-4 py-4 md:py-6 flex justify-between items-center relative z-10">
<!-- Logo/Brand Name -->
<a href="#" class="flex items-center space-x-2">
<svg class="h-8 w-8 text-white drop-shadow-[0_0_8px_rgba(255,255,255,0.7)] glow-effect-logo"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="M12 2L2 7l10 5 10-5-10-5z" />
<path d="M2 17l10 5 10-5" />
<path d="M2 12l10 5 10-5" />
</svg>
<span
class="text-white font-extrabold text-2xl tracking-tight leading-none drop-shadow-[0_0_8px_rgba(255,255,255,0.7)] group-hover:text-pink-500 transition-colors duration-300">
Sweet<span
class="text-purple-700 drop-shadow-[0_0_8px_rgba(110,0,255,0.7)] dark:text-pink-400 dark:drop-shadow-[0_0_8px_rgba(255,100,200,0.7)]">SaaS</span>
</span>
</a>
<!-- Desktop Navigation -->
<nav class="hidden md:flex space-x-8 lg:space-x-12">
<a href="#features"
class="text-white text-lg font-semibold relative group transition-colors duration-300 hover:text-pink-200 dark:hover:text-purple-300">
Features
<span
class="absolute left-0 bottom-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left glow-effect-underline"></span>
</a>
<a href="#pricing"
class="text-white text-lg font-semibold relative group transition-colors duration-300 hover:text-pink-200 dark:hover:text-purple-300">
Pricing
<span
class="absolute left-0 bottom-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left glow-effect-underline"></span>
</a>
<a href="#about"
class="text-white text-lg font-semibold relative group transition-colors duration-300 hover:text-pink-200 dark:hover:text-purple-300">
About
<span
class="absolute left-0 bottom-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left glow-effect-underline"></span>
</a>
<a href="#contact"
class="text-white text-lg font-semibold relative group transition-colors duration-300 hover:text-pink-200 dark:hover:text-purple-300">
Contact
<span
class="absolute left-0 bottom-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left glow-effect-underline"></span>
</a>
</nav>
<!-- Action Buttons / User / Mobile Menu Toggle -->
<div class="flex items-center space-x-4">
<a href="#signin"
class="hidden sm:block px-6 py-2 bg-white text-pink-500 rounded-full font-bold relative overflow-hidden group shadow-md transition-all duration-300 hover:shadow-lg dark:bg-purple-700 dark:text-white dark:hover:bg-purple-600">
<span class="relative z-10">Sign In</span>
<span
class="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300 glow-effect-button-hover"></span>
</a>
<a href="#signup"
class="hidden sm:block px-6 py-2 bg-purple-600 text-white rounded-full font-bold relative overflow-hidden group shadow-md transition-all duration-300 hover:shadow-lg dark:bg-pink-500 dark:hover:bg-pink-400">
<span class="relative z-10">Sign Up</span>
<span
class="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300 glow-effect-button-hover"></span>
</a>
<!-- Mobile Menu Button -->
<button class="md:hidden text-white focus:outline-none focus:ring-2 focus:ring-white rounded-md" aria-label="Toggle menu">
<svg class="h-8 w-8 glow-effect-icon" 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>
</button>
</div>
</div>
<!-- Mobile Menu (hidden by default, would be toggled with JS) -->
<div class="md:hidden bg-gradient-to-b from-pink-300 to-purple-400 dark:from-gray-900 dark:to-purple-950 py-4 px-4 shadow-inner relative z-0" style="display: none;">
<nav class="flex flex-col space-y-4">
<a href="#features"
class="block text-white text-lg font-semibold py-2 transition-colors duration-300 hover:pl-2 hover:text-pink-200 dark:hover:text-purple-300 relative group">
Features
<span
class="absolute left-0 bottom-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left glow-effect-underline glow-effect-mobile-line"></span>
</a>
<a href="#pricing"
class="block text-white text-lg font-semibold py-2 transition-colors duration-300 hover:pl-2 hover:text-pink-200 dark:hover:text-purple-300 relative group">
Pricing
<span
class="absolute left-0 bottom-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left glow-effect-underline glow-effect-mobile-line"></span>
</a>
<a href="#about"
class="block text-white text-lg font-semibold py-2 transition-colors duration-300 hover:pl-2 hover:text-pink-200 dark:hover:text-purple-300 relative group">
About
<span
class="absolute left-0 bottom-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left glow-effect-underline glow-effect-mobile-line"></span>
</a>
<a href="#contact"
class="block text-white text-lg font-semibold py-2 transition-colors duration-300 hover:pl-2 hover:text-pink-200 dark:hover:text-purple-300 relative group">
Contact
<span
class="absolute left-0 bottom-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left glow-effect-underline glow-effect-mobile-line"></span>
</a>
<div class="pt-4 flex flex-col space-y-3">
<a href="#signin"
class="block px-6 py-2 bg-white text-pink-500 rounded-full font-bold relative overflow-hidden group shadow-md transition-all duration-300 hover:shadow-lg dark:bg-purple-700 dark:text-white dark:hover:bg-purple-600">
<span class="relative z-10">Sign In</span>
<span
class="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300 glow-effect-button-hover"></span>
</a>
<a href="#signup"
class="block px-6 py-2 bg-purple-600 text-white rounded-full font-bold relative overflow-hidden group shadow-md transition-all duration-300 hover:shadow-lg dark:bg-pink-500 dark:hover:bg-pink-400">
<span class="relative z-10">Sign Up</span>
<span
class="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300 glow-effect-button-hover"></span>
</a>
</div>
</nav>
</div>
<!-- Custom CSS for glow effects - these would typically be in a separate CSS file or utility classes if more complex -->
<style>
.glow-effect-logo {
filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.7));
transition: filter 0.3s ease-in-out;
}
.group:hover .glow-effect-logo {
filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.9));
}
.glow-effect-underline {
box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}
.glow-effect-button-hover {
background: radial-gradient(circle at center, rgba(255, 255, 255, 0.4) 0%, transparent 70%);
filter: blur(8px);
transform: scale(1.5);
transition: all 0.3s ease-out;
}
.group:hover .glow-effect-button-hover {
opacity: 1;
transform: scale(1);
}
.glow-effect-icon {
filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.6));
transition: filter 0.3s ease-in-out;
}
.glow-effect-icon:hover {
filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.9));
}
/* Dark mode specific glows */
.dark .glow-effect-underline {
box-shadow: 0 0 8px rgba(173, 216, 230, 0.5); /* Lighter blue for dark mode glow */
}
.dark .glow-effect-button-hover {
background: radial-gradient(circle at center, rgba(173, 216, 230, 0.4) 0%, transparent 70%);
}
.dark .glow-effect-logo {
filter: drop-shadow(0 0 8px rgba(173, 216, 230, 0.7)); /* Lighter blue for dark mode glow */
}
.dark .group:hover .glow-effect-logo {
filter: drop-shadow(0 0 12px rgba(173, 216, 230, 0.9));
}
</style>
</header>Verwandte Komponenten
E-Commerce-Header-Komponente
Eine responsive E-Commerce-Header-Komponente, die mit Tailwind CSS nach Material Design-Prinzipien erstellt wurde. Verfügt über ein monochromatisches Farbschema (Blautöne), Suchfunktionen, ein Navigationsmenü, einen Warenkorb und ein Benutzerprofil. Der Header enthält Tiefeneffekte wie Schatten und unterstützt den Dunkelmodus. Die Komponente reagiert vollständig auf ein mobiles Hamburger-Menü.
E-Commerce-Header-Komponente
Eine reaktionsschnelle, lebendige, vom Material Design inspirierte Header-Komponente für E-Commerce-Websites mit Navigation, Suche und Benutzeraktionen. Unterstützt den Dunkelmodus.
Social-Media-Header-Komponente
Eine komplexe, reaktionsschnelle Header-Komponente im Dunkelmodus mit minimalistischem Design und komplementärem Farbschema, die für Social-Media-Schnittstellen entwickelt wurde.