CCHub Logo CCHub Tailwind Collection
구성 요소 목차 목차

목차

Table of Contents Microinteractions design, Analogous color scheme, Simple complexity 및 Social Media 목적을 가진 구성 요소. 어두운 테마 지원으로 반응형입니다. 자바스크립트 코드가 없습니다.

미리 보기

HTML 코드 

<nav class="p-4 bg-gray-100 dark:bg-gray-800">
  <ul class="space-y-2">
    <li><a href="#section1" class="block py-2 px-4 text-gray-700 hover:bg-gray-200 dark:text-gray-300 dark:hover:bg-gray-700 transition duration-300 ease-in-out transform hover:scale-105">Section 1</a></li>
    <li><a href="#section2" class="block py-2 px-4 text-gray-700 hover:bg-gray-200 dark:text-gray-300 dark:hover:bg-gray-700 transition duration-300 ease-in-out transform hover:scale-105">Section 2</a></li>
    <li><a href="#section3" class="block py-2 px-4 text-gray-700 hover:bg-gray-200 dark:text-gray-300 dark:hover:bg-gray-700 transition duration-300 ease-in-out transform hover:scale-105">Section 3</a></li>
  </ul>
</nav>

관련 구성 요소

Bauhaus_Retro_Photography_TOC

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

열다

Table of Contents 구성 요소

다크 모드용으로 설계된 반응형 목차 구성 요소로, 이미지와 아바타에 대한 제목과 자리 표시자가 있는 섹션이 있습니다.

열다

Table of Contents 구성 요소

반응형 및 다크 모드 지원 Table of Contents 구성 요소는 데이트/소셜 플랫폼에 적합한 레트로/빈티지 색상 팔레트가 있습니다. 차분한 색 구성표와 부드러운 스크롤 탐색이 특징입니다.

열다