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

Table of Contents 구성 요소

반응형 Table of Contents 구성 요소는 포트폴리오 쇼케이스를 위해 스큐어모픽 요소와 흙색으로 디자인되었으며 다크 모드를 지원합니다.

미리 보기

HTML 코드 

<div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-md">
    <h2 class="text-2xl font-semibold text-green-800 dark:text-green-200 mb-4">Table of Contents</h2>
    <ul class="space-y-4">
        <li class="bg-white dark:bg-gray-700 rounded-lg p-4 shadow-md transition duration-300 hover:shadow-lg">
            <a href="#section1" class="text-gray-800 dark:text-gray-200 font-semibold">Section 1</a>
        </li>
        <li class="bg-white dark:bg-gray-700 rounded-lg p-4 shadow-md transition duration-300 hover:shadow-lg">
            <a href="#section2" class="text-gray-800 dark:text-gray-200 font-semibold">Section 2</a>
        </li>
        <li class="bg-white dark:bg-gray-700 rounded-lg p-4 shadow-md transition duration-300 hover:shadow-lg">
            <a href="#section3" class="text-gray-800 dark:text-gray-200 font-semibold">Section 3</a>
        </li>
        <li class="bg-white dark:bg-gray-700 rounded-lg p-4 shadow-md transition duration-300 hover:shadow-lg">
            <a href="#section4" class="text-gray-800 dark:text-gray-200 font-semibold">Section 4</a>
        </li>
    </ul>
</div>

관련 구성 요소

Table of Contents 구성 요소

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

열다

Table of Contents 구성 요소

반응형 목차 구성 요소는 스큐어모피즘 디자인, 파스텔 색 구성표 및 다크 모드를 지원하며 포트폴리오에 적합합니다.

열다

Table of Contents 구성 요소

Tailwind CSS를 사용하여 Neumorphism으로 스타일링된 반응형 목차 구성 요소로, 어두운 테마를 지원하고 자리 표시자 이미지와 아바타를 표시합니다.

열다