Neon_Glow_Header_Component
네온/글로우 효과와 캔디/달콤한 색 구성표가 있는 SaaS 애플리케이션을 위한 반응형 헤더 구성 요소로, 다크 모드 지원 및 대화형 요소를 특징으로 합니다.
HTML 코드
<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>관련 구성 요소
Brutalist 헤더 구성 요소
Tailwind CSS로 디자인된 원시적이고 대담한 헤더 구성 요소로, 밝은 테마와 어두운 테마 모두에 적합한 높은 대비와 특이한 레이아웃을 특징으로 합니다.
헤더 구성 요소
블로그 또는 콘텐츠 사이트를 위한 간단하고 반응형이 빠른 헤더 구성 요소로, 단색 스타일과 다크 모드를 지원하며, 탐색 링크 위로 마우스를 가져갈 때 발생하는 미묘한 미묘한 상호 작용에 중점을 둡니다.