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

Table of Contents 구성 요소

Tailwind CSS로 디자인된 미니멀한 목차 구성 요소로, 반응형 효과와 어두운 테마 지원을 특징으로 합니다.

미리 보기

HTML 코드 

<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Table of Contents</h2>
    <ul class="list-disc pl-5 space-y-2">
        <li class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
            <a href="#section1" class="text-gray-700 dark:text-gray-300">Section 1</a>
        </li>
        <li class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
            <a href="#section2" class="text-gray-700 dark:text-gray-300">Section 2</a>
        </li>
        <li class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
            <a href="#section3" class="text-gray-700 dark:text-gray-300">Section 3</a>
        </li>
        <li class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
            <a href="#section4" class="text-gray-700 dark:text-gray-300">Section 4</a>
        </li>
        <li class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
            <a href="#section5" class="text-gray-700 dark:text-gray-300">Section 5</a>
        </li>
    </ul>
</div>

<div class="mt-8 bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
    <h3 id="section1" class="text-xl font-semibold text-gray-800 dark:text-white">Section 1</h3>
    <p class="text-gray-700 dark:text-gray-300">Content for section 1. <img src="https://picsum.photos/200/100" alt="Random placeholder" class="mt-2 rounded-md" /></p>
</div>
<div class="mt-4 bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
    <h3 id="section2" class="text-xl font-semibold text-gray-800 dark:text-white">Section 2</h3>
    <p class="text-gray-700 dark:text-gray-300">Content for section 2. <img src="https://picsum.photos/200/100?random=1" alt="Random placeholder" class="mt-2 rounded-md" /></p>
</div>
<div class="mt-4 bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
    <h3 id="section3" class="text-xl font-semibold text-gray-800 dark:text-white">Section 3</h3>
    <p class="text-gray-700 dark:text-gray-300">Content for section 3. <img src="https://picsum.photos/200/100?random=2" alt="Random placeholder" class="mt-2 rounded-md" /></p>
</div>
<div class="mt-4 bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
    <h3 id="section4" class="text-xl font-semibold text-gray-800 dark:text-white">Section 4</h3>
    <p class="text-gray-700 dark:text-gray-300">Content for section 4. <img src="https://picsum.photos/200/100?random=3" alt="Random placeholder" class="mt-2 rounded-md" /></p>
</div>
<div class="mt-4 bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
    <h3 id="section5" class="text-xl font-semibold text-gray-800 dark:text-white">Section 5</h3>
    <p class="text-gray-700 dark:text-gray-300">Content for section 5. <img src="https://picsum.photos/200/100?random=4" alt="Random placeholder" class="mt-2 rounded-md" /></p>
</div>

관련 구성 요소

Bauhaus_Retro_Photography_TOC

사진 웹사이트를 위한 복잡하고 반응이 빠른 목차 구성 요소로, Bauhaus의 디자인 원칙과 레트로/빈티지 색상 팔레트에서 영감을 받았습니다. 기하학적 형태, 차분한 색상 및 완전 다크 모드 지원이 특징이며 사진 갤러리 및 포트폴리오에 이상적입니다.

열다

레트로어스대시보드TOC

반응형 목차 구성 요소에는 레트로/빈티지 디자인, 어스 톤 색 구성표, 대시보드 사용을 위한 다크 모드 지원이 있습니다.

열다

Table of Contents 구성 요소

Glassmorphism 스타일로 디자인된 반응형 목차 구성 요소로, 흐림 효과가 있는 젖빛 유리와 같은 반투명 요소를 특징으로 하며 Tailwind CSS로 밝은 테마와 어두운 테마를 모두 지원합니다.

열다