Table of Contents 구성 요소

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

미리 보기

HTML 코드

<div class="bg-gray-900 text-gray-300 p-8 min-h-screen">
  <div class="max-w-4xl mx-auto">
    <h1 class="text-3xl font-bold text-white mb-8">Table of Contents</h1>
    <div class="bg-gray-800 p-6 rounded-lg shadow-lg">
      <ul class="space-y-4">
        <li>
          <a href="#section-1" class="text-gray-400 hover:text-white transition duration-300 ease-in-out">
            <span class="font-semibold text-gray-300">Section 1:</span> Introduction
          </a>
        </li>
        <li>
          <a href="#section-2" class="text-gray-400 hover:text-white transition duration-300 ease-in-out">
            <span class="font-semibold text-gray-300">Section 2:</span> About Me
          </a>
          <ul class="ml-6 mt-2 space-y-2">
            <li>
              <a href="#section-2-1" class="text-gray-500 hover:text-white transition duration-300 ease-in-out">
                2.1 My Background
              </a>
            </li>
            <li>
              <a href="#section-2-2" class="text-gray-500 hover:text-white transition duration-300 ease-in-out">
                2.2 Skills
              </a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#section-3" class="text-gray-400 hover:text-white transition duration-300 ease-in-out">
            <span class="font-semibold text-gray-300">Section 3:</span> My Work
          </a>
          <ul class="ml-6 mt-2 space-y-2">
            <li>
              <a href="#section-3-1" class="text-gray-500 hover:text-white transition duration-300 ease-in-out">
                3.1 Project Alpha
              </a>
            </li>
            <li>
              <a href="#section-3-2" class="text-gray-500 hover:text-white transition duration-300 ease-in-out">
                3.2 Project Beta
              </a>
            </li>
            <li>
              <a href="#section-3-3" class="text-gray-500 hover:text-white transition duration-300 ease-in-out">
                3.3 Project Gamma
              </a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#section-4" class="text-gray-400 hover:text-white transition duration-300 ease-in-out">
            <span class="font-semibold text-gray-300">Section 4:</span> Contact
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>

Table of Contents 구성 요소

미리 보기

HTML 코드

관련 구성 요소

Table of Contents 구성 요소

레트로어스대시보드TOC

Bauhaus_Retro_Photography_TOC