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

Table of Contents 구성 요소

스위스/인터내셔널 타이포그래피에서 영감을 받은 깔끔하고 미니멀하며 반응이 빠른 목차 구성 요소로, 문서 및 기술 자료 사이트를 위해 설계되었으며, 따뜻한 무채색과 완전한 다크 모드를 지원합니다.

미리 보기

HTML 코드 

<div class="font-sans antialiased text-gray-800 dark:text-gray-200 bg-white dark:bg-gray-900 leading-normal tracking-wider">

  <div class="max-w-xs md:max-w-sm lg:max-w-md mx-auto p-4 md:p-6 lg:p-8 rounded-lg shadow-lg bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700">
    <h3 class="text-lg md:text-xl lg:text-2xl font-bold mb-4 md:mb-6 text-gray-900 dark:text-gray-100 uppercase tracking-widest border-b border-gray-300 dark:border-gray-600 pb-2">
      Contents
    </h3>
    <nav aria-label="Table of Contents">
      <ul class="space-y-2 text-sm md:text-base lg:text-lg">
        <li>
          <a href="#introduction" class="block py-1 px-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 dark:focus:ring-gray-500 transition-colors duration-200 text-gray-700 dark:text-gray-300">
            <span class="font-semibold text-gray-800 dark:text-gray-200 hover:underline">1. Introduction</span>
          </a>
        </li>
        <li>
          <a href="#getting-started" class="block py-1 px-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 dark:focus:ring-gray-500 transition-colors duration-200 text-gray-700 dark:text-gray-300">
            <span class="font-semibold text-gray-800 dark:text-gray-200 hover:underline">2. Getting Started</span>
          </a>
          <ul class="ml-4 md:ml-6 mt-2 space-y-1">
            <li>
              <a href="#installation" class="block py-1 px-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 dark:focus:ring-gray-500 transition-colors duration-200 text-gray-600 dark:text-gray-400">
                2.1. Installation Guide
              </a>
            </li>
            <li>
              <a href="#basic-setup" class="block py-1 px-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 dark:focus:ring-gray-500 transition-colors duration-200 text-gray-600 dark:text-gray-400">
                2.2. Basic Setup
              </a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#core-concepts" class="block py-1 px-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 dark:focus:ring-gray-500 transition-colors duration-200 text-gray-700 dark:text-gray-300">
            <span class="font-semibold text-gray-800 dark:text-gray-200 hover:underline">3. Core Concepts</span>
          </a>
        </li>
        <li>
          <a href="#advanced-topics" class="block py-1 px-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 dark:focus:ring-gray-500 transition-colors duration-200 text-gray-700 dark:text-gray-300">
            <span class="font-semibold text-gray-800 dark:text-gray-200 hover:underline">4. Advanced Topics</span>
          </a>
          <ul class="ml-4 md:ml-6 mt-2 space-y-1">
            <li>
              <a href="#customization" class="block py-1 px-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 dark:focus:ring-gray-500 transition-colors duration-200 text-gray-600 dark:text-gray-400">
                4.1. Customization
              </a>
            </li>
            <li>
              <a href="#integrations" class="block py-1 px-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 dark:focus:ring-gray-500 transition-colors duration-200 text-gray-600 dark:text-gray-400">
                4.2. Integrations and APIs
              </a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#troubleshooting" class="block py-1 px-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 dark:focus:ring-gray-500 transition-colors duration-200 text-gray-700 dark:text-gray-300">
            <span class="font-semibold text-gray-800 dark:text-gray-200 hover:underline">5. Troubleshooting</span>
          </a>
        </li>
        <li>
          <a href="#faq" class="block py-1 px-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 dark:focus:ring-gray-500 transition-colors duration-200 text-gray-700 dark:text-gray-300">
            <span class="font-semibold text-gray-800 dark:text-gray-200 hover:underline">6. FAQ</span>
          </a>
        </li>
      </ul>
    </nav>
  </div>

</div>

관련 구성 요소

목차

Glassmorphism으로 스타일링된 반응형 목차 구성 요소로, 흐림 효과와 어두운 테마를 지원하는 젖빛 유리와 같은 반투명 요소를 특징으로 합니다. 시각적 표현을 위한 섹션과 자리 표시자 이미지가 포함되어 있습니다.

열다

Table of Contents 구성 요소

머티리얼 디자인 스타일로 디자인된 반응형 목차 구성 요소로, 비즈니스/기업 웹 사이트에 대한 흙색 및 어두운 테마 지원이 있습니다.

열다

Table of Contents 구성 요소

glassmorphism 디자인과 파스텔 색 구성표가 있는 반응형 Table of Contents 구성 요소로, 데이터 시각화 및 제어판이 있는 대시보드에 적합합니다.

열다