CCHub Logo CCHub Tailwind Collection
구성 요소 목차 Table of Contents 구성 요소

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 구성 요소

Tailwind CSS를 사용하여 다크 모드를 지원하는 반응형 목차 구성 요소. 이 구성 요소는 포트폴리오 목적으로 설계되었으며, 단색 색 구성표와 JavaScript가 없는 적당한 복잡성 수준을 특징으로 합니다.

열다

Table of Contents 구성 요소

머티리얼 디자인에서 생생한 색상으로 스타일링된 반응형 목차 구성요소로, 다크 모드 지원 및 여러 대화형 요소를 포함하여 블로그 및 콘텐츠 소비에 적합합니다.

열다

레트로 캔디 목차

향수를 불러일으키는 복고풍 테마의 목차 구성 요소로, 사탕에서 영감을 받은 색 구성표가 있어 음식 및 레스토랑 웹사이트에 적합합니다. 부드러운 스크롤 표시기와 다크 모드 지원이 있는 '고정' 사이드바와 같은 탐색 기능이 있습니다.

열다