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

Table of Contents 구성 요소

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

미리 보기

HTML 코드 

<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 max-w-md mx-auto">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Table of Contents</h2>
    <ul class="list-inside list-disc text-gray-600 dark:text-gray-300">
        <li class="py-1"><a href="#section1" class="hover:text-blue-600 dark:hover:text-blue-400">Section 1</a></li>
        <li class="py-1"><a href="#section2" class="hover:text-blue-600 dark:hover:text-blue-400">Section 2</a></li>
        <li class="py-1"><a href="#section3" class="hover:text-blue-600 dark:hover:text-blue-400">Section 3</a></li>
        <li class="py-1"><a href="#section4" class="hover:text-blue-600 dark:hover:text-blue-400">Section 4</a></li>
        <li class="py-1"><a href="#section5" class="hover:text-blue-600 dark:hover:text-blue-400">Section 5</a></li>
    </ul>
</div>

<div class="hidden md:flex items-center justify-center mt-8">
    <img src="https://picsum.photos/150" alt="Placeholder Image" class="rounded-full border-2 border-gray-300 dark:border-gray-700">
    <span class="ml-3 text-gray-600 dark:text-gray-300">Created by: <span class="font-semibold">John Doe</span></span>
</div>

<style>
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1a202c;
            color: #e2e8f0;
        }
    }
</style>

관련 구성 요소

Table of Contents 구성 요소

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

열다

Table of Contents 구성 요소

머티리얼 디자인 스타일로 디자인된 반응형 목차 구성 요소로, 비즈니스/기업 웹 사이트에 대한 흙색 및 어두운 테마 지원이 있습니다.

열다

3D 목차 구성 요소

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

열다