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

Table of Contents 구성 요소

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

미리 보기

HTML 코드 

<nav class="p-4 bg-gray-900 text-stone-200 min-h-screen dark:bg-gray-900">
  <h2 class="text-xl font-bold mb-4 text-stone-100">Table of Contents</h2>
  <ul class="space-y-2">
    <li><a href="#section-1" class="block py-2 px-3 rounded hover:bg-stone-700 hover:text-stone-50 transition-colors duration-200">Introduction</a></li>
    <li><a href="#section-2" class="block py-2 px-3 rounded hover:bg-stone-700 hover:text-stone-50 transition-colors duration-200">Getting Started</a></li>
    <li><a href="#section-3" class="block py-2 px-3 rounded hover:bg-stone-700 hover:text-stone-50 transition-colors duration-200">User Profiles</a></li>
    <li><a href="#section-4" class="block py-2 px-3 rounded hover:bg-stone-700 hover:text-stone-50 transition-colors duration-200">Creating Posts</a></li>
    <li><a href="#section-5" class="block py-2 px-3 rounded hover:bg-stone-700 hover:text-stone-50 transition-colors duration-200">Interacting with Content</a></li>
    <li><a href="#section-6" class="block py-2 px-3 rounded hover:bg-stone-700 hover:text-stone-50 transition-colors duration-200">Privacy Settings</a></li>
    <li><a href="#section-7" class="block py-2 px-3 rounded hover:bg-stone-700 hover:text-stone-50 transition-colors duration-200">Notifications</a></li>
    <li><a href="#section-8" class="block py-2 px-3 rounded hover:bg-stone-700 hover:text-stone-50 transition-colors duration-200">Troubleshooting</a></li>
  </ul>
</nav>

관련 구성 요소

Table of Contents 구성 요소

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

열다

Bauhaus_Retro_Photography_TOC

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

열다

3D 목차 구성 요소

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

열다