CCHub Logo CCHub Tailwind Collection
구성 요소 목차 레트로 목차

레트로 목차

반응형 목차 구성 요소에는 레트로/빈티지 디자인, 유사한 색 구성표 및 다크 모드가 지원됩니다. 비즈니스/기업 웹사이트에 적합합니다. JavaScript 없이 Tailwind CSS를 사용합니다.

미리 보기

HTML 코드 

<div class="bg-gray-200 dark:bg-gray-800 retro-analogous-colors p-6 rounded-lg shadow-lg">
  <h2 class="text-xl font-bold mb-4 dark:text-white">Table of Contents</h2>
  <ul class="space-y-2">
    <li><a href="#section-1" class="text-blue-800 dark:text-blue-300 hover:underline">Section 1: Introduction</a></li>
    <li><a href="#section-2" class="text-blue-800 dark:text-blue-300 hover:underline">Section 2: Getting Started</a></li>
    <li><a href="#section-3" class="text-blue-800 dark:text-blue-300 hover:underline">Section 3: Core Concepts</a></li>
    <li><a href="#section-4" class="text-blue-800 dark:text-blue-300 hover:underline">Section 4: Advanced Topics</a></li>
    <li><a href="#section-5" class="text-blue-800 dark:text-blue-300 hover:underline">Section 5: Conclusion</a></li>
  </ul>
</div>

<style>
  .retro-analogous-colors {
    /* Define your retro analogous colors here using Tailwind's custom colors or by extending the theme */
    /* Example (you would define these in your tailwind.config.js): */
    /* background-color: theme('colors.retro-light'); */
    /* color: theme('colors.retro-dark'); */
  }

  .dark .retro-analogous-colors {
     /* background-color: theme('colors.retro-dark'); */
     /* color: theme('colors.retro-light'); */
  }
</style>

관련 구성 요소

Bauhaus_Retro_Photography_TOC

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

열다

3D_Music_TOC_Component

음악/오디오 플랫폼을 위한 복잡하고 대비가 높은 3D에서 영감을 받은 목차 구성 요소로, 반응형 디자인과 다크 모드 지원을 특징으로 합니다.

열다

Table of Contents 구성 요소

Tailwind CSS를 사용하여 머티리얼 디자인 원칙에 따라 스타일링된 반응형 목차 구성요소로, 다크 모드를 지원하고 자리표시자 이미지와 아바타를 제공합니다.

열다