Table of Contents 구성 요소
네온/글로우 효과와 가을 색 구성표가 있는 간단하고 반응이 빠른 목차 구성 요소로, 다크 모드 지원을 포함하여 사진 포트폴리오 또는 갤러리에 적합합니다.
HTML 코드
<div class="p-4 sm:p-6 lg:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">
<div class="w-full max-w-sm sm:max-w-md lg:max-w-lg bg-gradient-to-br from-amber-800 via-orange-900 to-red-900 dark:from-gray-800 dark:via-gray-900 dark:to-black rounded-lg shadow-xl overflow-hidden p-6 relative group transform hover:scale-[1.01] transition-all duration-300 ease-in-out border-2 border-transparent hover:border-amber-500/50 dark:hover:border-purple-600/50">
<!-- Glow Effect Overlay -->
<div class="absolute inset-0 bg-amber-500/20 dark:bg-purple-500/20 rounded-lg opacity-0 group-hover:opacity-100 group-hover:blur-sm transition-opacity duration-500 pointer-events-none"></div>
<div class="absolute inset-0.5 bg-amber-300/10 dark:bg-purple-300/10 rounded-lg opacity-0 group-hover:opacity-100 group-hover:blur-md transition-opacity duration-700 pointer-events-none"></div>
<div class="relative z-10">
<h2 class="text-2xl sm:text-3xl font-extrabold text-amber-200 dark:text-purple-300 mb-6 text-center tracking-wide" style="text-shadow: 0 0 10px rgba(251, 191, 36, 0.7), 0 0 20px rgba(251, 191, 36, 0.4); dark:text-shadow: 0 0 10px rgba(168, 85, 247, 0.7), 0 0 20px rgba(168, 85, 247, 0.4);">
GALLERY SECTIONS
</h2>
<nav aria-label="Gallery Sections Table of Contents">
<ul class="space-y-4">
<li>
<a href="#landscapes" class="block p-3 rounded-md text-amber-100 dark:text-purple-200 hover:bg-amber-700/60 dark:hover:bg-purple-800/60 transition-colors duration-200 relative overflow-hidden group/item focus:outline-none focus:ring-2 focus:ring-amber-400 dark:focus:ring-purple-400"
style="box-shadow: 0 0 5px rgba(251, 191, 36, 0.3); dark:box-shadow: 0 0 5px rgba(168, 85, 247, 0.3);">
<span class="relative z-10 font-medium text-lg leading-tight block">
Landscapes
<span class="absolute top-0 left-0 w-full h-full bg-amber-500/30 dark:bg-purple-500/30 blur-md opacity-0 group-hover/item:opacity-70 transition-opacity duration-300 glow-pulse"></span>
</span>
</a>
</li>
<li>
<a href="#portraits" class="block p-3 rounded-md text-amber-100 dark:text-purple-200 hover:bg-amber-700/60 dark:hover:bg-purple-800/60 transition-colors duration-200 relative overflow-hidden group/item focus:outline-none focus:ring-2 focus:ring-amber-400 dark:focus:ring-purple-400"
style="box-shadow: 0 0 5px rgba(251, 191, 36, 0.3); dark:box-shadow: 0 0 5px rgba(168, 85, 247, 0.3);">
<span class="relative z-10 font-medium text-lg leading-tight block">
Portraits
<span class="absolute top-0 left-0 w-full h-full bg-amber-500/30 dark:bg-purple-500/30 blur-md opacity-0 group-hover/item:opacity-70 transition-opacity duration-300 glow-pulse"></span>
</span>
</a>
</li>
<li>
<a href="#wildlife" class="block p-3 rounded-md text-amber-100 dark:text-purple-200 hover:bg-amber-700/60 dark:hover:bg-purple-800/60 transition-colors duration-200 relative overflow-hidden group/item focus:outline-none focus:ring-2 focus:ring-amber-400 dark:focus:ring-purple-400"
style="box-shadow: 0 0 5px rgba(251, 191, 36, 0.3); dark:box-shadow: 0 0 5px rgba(168, 85, 247, 0.3);">
<span class="relative z-10 font-medium text-lg leading-tight block">
Wildlife
<span class="absolute top-0 left-0 w-full h-full bg-amber-500/30 dark:bg-purple-500/30 blur-md opacity-0 group-hover/item:opacity-70 transition-opacity duration-300 glow-pulse"></span>
</span>
</a>
</li>
<li>
<a href="#abstract" class="block p-3 rounded-md text-amber-100 dark:text-purple-200 hover:bg-amber-700/60 dark:hover:bg-purple-800/60 transition-colors duration-200 relative overflow-hidden group/item focus:outline-none focus:ring-2 focus:ring-amber-400 dark:focus:ring-purple-400"
style="box-shadow: 0 0 5px rgba(251, 191, 36, 0.3); dark:box-shadow: 0 0 5px rgba(168, 85, 247, 0.3);">
<span class="relative z-10 font-medium text-lg leading-tight block">
Abstract
<span class="absolute top-0 left-0 w-full h-full bg-amber-500/30 dark:bg-purple-500/30 blur-md opacity-0 group-hover/item:opacity-70 transition-opacity duration-300 glow-pulse"></span>
</span>
</a>
</li>
<li>
<a href="#events" class="block p-3 rounded-md text-amber-100 dark:text-purple-200 hover:bg-amber-700/60 dark:hover:bg-purple-800/60 transition-colors duration-200 relative overflow-hidden group/item focus:outline-none focus:ring-2 focus:ring-amber-400 dark:focus:ring-purple-400"
style="box-shadow: 0 0 5px rgba(251, 191, 36, 0.3); dark:box-shadow: 0 0 5px rgba(168, 85, 247, 0.3);">
<span class="relative z-10 font-medium text-lg leading-tight block">
Events
<span class="absolute top-0 left-0 w-full h-full bg-amber-500/30 dark:bg-purple-500/30 blur-md opacity-0 group-hover/item:opacity-70 transition-opacity duration-300 glow-pulse"></span>
</span>
</a>
</li>
</ul>
</nav>
<div class="mt-6 text-center text-amber-300 dark:text-purple-400 text-sm opacity-80" style="text-shadow: 0 0 5px rgba(251, 191, 36, 0.3); dark:text-shadow: 0 0 5px rgba(168, 85, 247, 0.3);">
<p>© 2023 Photonix Photography</p>
</div>
</div>
</div>
</div>
<style>
/* This is a simple keyframe animation for the glow-pulse effect on hover */
/* It's included directly as Tailwind doesn't support custom keyframe animations through classes alone */
@keyframes glow-pulse {
0% { transform: scale(0.95); opacity: 0.7; }
50% { transform: scale(1.05); opacity: 1; }
100% { transform: scale(0.95); opacity: 0.7; }
}
.glow-pulse {
animation: glow-pulse 1.5s infinite alternate;
}
/* Dark mode specific glow-pulse for visual distinctiveness */
.dark .glow-pulse {
animation: glow-pulse-dark 1.5s infinite alternate;
}
@keyframes glow-pulse-dark {
0% { transform: scale(0.95); opacity: 0.7; }
50% { transform: scale(1.05); opacity: 1; }
100% { transform: scale(0.95); opacity: 0.7; }
}
</style>관련 구성 요소
Table of Contents 구성 요소
Tailwind CSS로 스타일이 지정된 미니멀하고 반응이 빠른 목차 구성 요소로, 다크 모드를 지원하고 깔끔한 디자인 요소를 특징으로 합니다.
Bauhaus_Retro_Photography_TOC
사진 웹사이트를 위한 복잡하고 반응이 빠른 목차 구성 요소로, Bauhaus의 디자인 원칙과 레트로/빈티지 색상 팔레트에서 영감을 받았습니다. 기하학적 형태, 차분한 색상 및 완전 다크 모드 지원이 특징이며 사진 갤러리 및 포트폴리오에 이상적입니다.