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

목차

Glassmorphism으로 스타일링된 반응형 목차 구성 요소로, 흐림 효과와 어두운 테마를 지원하는 젖빛 유리와 같은 반투명 요소를 특징으로 합니다. 시각적 표현을 위한 섹션과 자리 표시자 이미지가 포함되어 있습니다.

미리 보기

HTML 코드 

<div class="bg-white bg-opacity-30 backdrop-blur-md shadow-lg rounded-lg p-6">
    <h2 class="text-2xl font-bold mb-4">Table of Contents</h2>
    <ul class="space-y-3">
        <li class="p-4 bg-white bg-opacity-20 backdrop-blur-md rounded-lg hover:bg-opacity-30 transition duration-200">
            <a href="#section1" class="text-gray-900 dark:text-white">Introduction</a>
        </li>
        <li class="p-4 bg-white bg-opacity-20 backdrop-blur-md rounded-lg hover:bg-opacity-30 transition duration-200">
            <a href="#section2" class="text-gray-900 dark:text-white">Features</a>
        </li>
        <li class="p-4 bg-white bg-opacity-20 backdrop-blur-md rounded-lg hover:bg-opacity-30 transition duration-200">
            <a href="#section3" class="text-gray-900 dark:text-white">Installation</a>
        </li>
        <li class="p-4 bg-white bg-opacity-20 backdrop-blur-md rounded-lg hover:bg-opacity-30 transition duration-200">
            <a href="#section4" class="text-gray-900 dark:text-white">Usage</a>
        </li>
        <li class="p-4 bg-white bg-opacity-20 backdrop-blur-md rounded-lg hover:bg-opacity-30 transition duration-200">
            <a href="#section5" class="text-gray-900 dark:text-white">Conclusion</a>
        </li>
    </ul>
    <div class="mt-6">
        <img src="https://picsum.photos/400/200?random=1" alt="Placeholder Image" class="w-full h-auto rounded-lg">
        <div class="flex items-center mt-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full">
            <span class="ml-3 text-gray-700 dark:text-gray-300">User Name</span>
        </div>
    </div>
</div>

<style>
    @media (prefers-color-scheme: dark) {
        .bg-white {
            background-color: rgba(255, 255, 255, 0.1);
        }
        .text-gray-900 {
            color: white;
        }
        .text-gray-700 {
            color: #e0e0e0;
        }
    }
</style>

관련 구성 요소

Table of Contents 구성 요소

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

열다

Table of Contents 구성 요소

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

열다

Table of Contents 구성 요소

Tailwind CSS를 사용하여 다크 모드를 지원하는 반응형 목차 구성 요소. 이 구성 요소는 포트폴리오 목적으로 설계되었으며, 단색 색 구성표와 JavaScript가 없는 적당한 복잡성 수준을 특징으로 합니다.

열다