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

목차 구성 요소 34

머티리얼 디자인으로 스타일이 지정된 반응형 목차 구성요소로, 어두운 테마를 지원하고 Tailwind CSS를 사용합니다.

미리 보기

HTML 코드 

<div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-6 max-w-md mx-auto">
    <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Table of Contents</h2>
    <ul class="space-y-2">
        <li>
            <a href="#section1" class="flex items-center p-2 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 rounded transition duration-150 ease-in-out">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
                Section 1
            </a>
        </li>
        <li>
            <a href="#section2" class="flex items-center p-2 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 rounded transition duration-150 ease-in-out">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
                Section 2
            </a>
        </li>
        <li>
            <a href="#section3" class="flex items-center p-2 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 rounded transition duration-150 ease-in-out">
                <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
                Section 3
            </a>
        </li>
        <li>
            <a href="#section4" class="flex items-center p-2 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 rounded transition duration-150 ease-in-out">
                <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
                Section 4
            </a>
        </li>
        <li>
            <a href="#section5" class="flex items-center p-2 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 rounded transition duration-150 ease-in-out">
                <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
                Section 5
            </a>
        </li>
    </ul>
</div>

관련 구성 요소

레트로어스대시보드TOC

반응형 목차 구성 요소에는 레트로/빈티지 디자인, 어스 톤 색 구성표, 대시보드 사용을 위한 다크 모드 지원이 있습니다.

열다

Table of Contents 구성 요소

스위스/인터내셔널 타이포그래피에서 영감을 받은 깔끔하고 미니멀하며 반응이 빠른 목차 구성 요소로, 문서 및 기술 자료 사이트를 위해 설계되었으며, 따뜻한 무채색과 완전한 다크 모드를 지원합니다.

열다

Table of Contents 구성 요소

Glassmorphism 스타일로 디자인된 반응형 목차 구성 요소로, 흐림 효과가 있는 젖빛 유리와 같은 반투명 요소를 특징으로 하며 Tailwind CSS로 밝은 테마와 어두운 테마를 모두 지원합니다.

열다