Neon_Glow_Header_Component
A responsive header component for SaaS applications with neon/glow effects and a candy/sweet color scheme, featuring dark mode support and interactive elements.
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>Related Components
Header Component
A responsive header component for a music/audio platform, featuring a monospace/developer design aesthetic with earth tones and dark mode support.
Skeuomorphic Header Component
A simple and responsive header component designed for e-commerce websites with a skeuomorphic style, using a grayscale color scheme and supporting dark mode.
Material Design Business Header
Material Design inspired simple header component with complementary color scheme for business websites. Responsive design with dark theme support.