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>

관련 구성 요소

Table of Contents 구성 요소

소셜 미디어 인터페이스를 위한 반응형 목차 구성 요소로, 흙색과 간단한 레이아웃을 사용하는 다크 모드 UI로 설계되었습니다. Tailwind CSS를 사용하여 어두운 테마를 지원하며 JavaScript가 없는 HTML 전용입니다.

열다

Bauhaus_Retro_Photography_TOC

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

열다

3D 목차 구성 요소

전자 상거래를 위해 설계된 반응형 목차 구성 요소로, 3D 디자인 요소와 보색 구성표를 특징으로 합니다. 여기에는 대화형 요소가 포함되어 있으며 다크 모드를 지원합니다.

열다