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 구성 요소

소셜 미디어 인터페이스를 위한 반응형 목차 구성 요소로, 흙색과 간단한 레이아웃을 사용하는 다크 모드 UI로 설계되었습니다. Tailwind CSS를 사용하여 어두운 테마를 지원하며 JavaScript가 없는 HTML 전용입니다.

열다

Table of Contents 구성 요소

머티리얼 디자인 스타일로 디자인된 간단한 목차 구성 요소로, 흙색을 활용하고 다크 모드를 지원합니다. 블로그의 콘텐츠 소비에 적합합니다.

열다