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>

관련 구성 요소

Table of Contents 구성 요소

Tailwind CSS로 스타일이 지정된 미니멀하고 반응이 빠른 목차 구성 요소로, 다크 모드를 지원하고 깔끔한 디자인 요소를 특징으로 합니다.

열다

Table of Contents 구성 요소

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

열다

Glassmorphism_RealEstate_TableOfContents

부동산 목록을 위한 glassmorphism 스타일의 Table of Contents 구성 요소로, 반투명 요소, 흐림 효과 및 자주색/보라색 색 구성표를 특징으로 합니다. 반응이 빠르고 다크 모드를 지원합니다.

열다