Neon_Glow_Header_Component
Un composant d’en-tête réactif pour les applications SaaS avec des effets de néon/lueur et une palette de couleurs bonbon/doux, avec prise en charge du mode sombre et des éléments interactifs.
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>Composants associés
Composant d’en-tête 3D
Composant d’en-tête complexe et interactif conçu pour les interfaces de médias sociaux à l’aide d’un style 3D avec des couleurs en niveaux de gris. Il comprend un logo, une barre de recherche, des avatars d’utilisateurs et des boutons d’action, avec un comportement réactif et une prise en charge du mode sombre.
Skeuomorphism Triadic Simple Portfolio Header Component
Skeuomorphism Triadic Simple Portfolio Header Component
Composant d’en-tête de commerce électronique
Un composant d’en-tête réactif, dynamique, inspiré du Material Design pour les sites Web de commerce électronique, avec la navigation, la recherche et les actions de l’utilisateur. Prend en charge le mode sombre.