Table of Contents 구성 요소
Glassmorphism 스타일로 디자인된 반응형 목차 구성 요소로, 흐림 효과가 있는 젖빛 유리와 같은 반투명 요소를 특징으로 하며 Tailwind CSS로 밝은 테마와 어두운 테마를 모두 지원합니다.
HTML 코드
<div class="bg-white bg-opacity-30 dark:bg-gray-800 dark:bg-opacity-60 backdrop-blur-lg border border-gray-300 dark:border-gray-600 rounded-lg p-6 shadow-lg max-w-md mx-auto">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white">Table of Contents</h2>
<ul class="mt-4 space-y-3">
<li class="p-3 rounded-lg bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-80 hover:bg-opacity-50 dark:hover:bg-opacity-60 transition-all duration-300">
<a href="#section1" class="text-gray-800 dark:text-white">Section 1: Introduction</a>
</li>
<li class="p-3 rounded-lg bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-80 hover:bg-opacity-50 dark:hover:bg-opacity-60 transition-all duration-300">
<a href="#section2" class="text-gray-800 dark:text-white">Section 2: Features</a>
</li>
<li class="p-3 rounded-lg bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-80 hover:bg-opacity-50 dark:hover:bg-opacity-60 transition-all duration-300">
<a href="#section3" class="text-gray-800 dark:text-white">Section 3: Installation</a>
</li>
<li class="p-3 rounded-lg bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-80 hover:bg-opacity-50 dark:hover:bg-opacity-60 transition-all duration-300">
<a href="#section4" class="text-gray-800 dark:text-white">Section 4: Usage</a>
</li>
<li class="p-3 rounded-lg bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-80 hover:bg-opacity-50 dark:hover:bg-opacity-60 transition-all duration-300">
<a href="#section5" class="text-gray-800 dark:text-white">Section 5: Conclusion</a>
</li>
</ul>
</div>
관련 구성 요소
Table of Contents 컴포넌트 - 3D Earth Tones
비즈니스 및 기업 웹 사이트를 위한 복잡한 3D에서 영감을 받은 목차 구성 요소로, 어스 톤과 다크 모드 지원으로 완전한 응답성을 제공합니다. 깊이와 몰입도를 제공하도록 설계되었습니다.
Table of Contents 구성 요소
반응형 및 다크 모드 지원 Table of Contents 구성 요소는 데이트/소셜 플랫폼에 적합한 레트로/빈티지 색상 팔레트가 있습니다. 차분한 색 구성표와 부드러운 스크롤 탐색이 특징입니다.