CCHub Logo CCHub Tailwind Collection
구성 요소 갤러리 갤러리 구성 요소

갤러리 구성 요소

머티리얼 디자인 스타일의 Tailwind CSS를 사용하는 반응형 갤러리 구성 요소로, 어두운 테마를 지원하는 대시보드에 적합합니다.

미리 보기

HTML 코드 

<div class="container mx-auto p-6">
    <h2 class="text-3xl font-bold text-center text-gray-900 dark:text-gray-100 mb-6">Gallery Component</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
        <!-- Card 1 -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
            <img src="https://picsum.photos/200/300" alt="Image 1" class="rounded-lg mb-4">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Image Title 1</h3>
            <p class="text-gray-600 dark:text-gray-300">Description of image 1.</p>
        </div>
        
        <!-- Card 2 -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
            <img src="https://picsum.photos/200/301" alt="Image 2" class="rounded-lg mb-4">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Image Title 2</h3>
            <p class="text-gray-600 dark:text-gray-300">Description of image 2.</p>
        </div>
        
        <!-- Card 3 -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
            <img src="https://picsum.photos/200/302" alt="Image 3" class="rounded-lg mb-4">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Image Title 3</h3>
            <p class="text-gray-600 dark:text-gray-300">Description of image 3.</p>
        </div>
        
        <!-- Card 4 -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
            <img src="https://picsum.photos/200/303" alt="Image 4" class="rounded-lg mb-4">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Image Title 4</h3>
            <p class="text-gray-600 dark:text-gray-300">Description of image 4.</p>
        </div>
        
        <!-- More cards -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
            <img src="https://picsum.photos/200/304" alt="Image 5" class="rounded-lg mb-4">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Image Title 5</h3>
            <p class="text-gray-600 dark:text-gray-300">Description of image 5.</p>
        </div>
        
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
            <img src="https://picsum.photos/200/305" alt="Image 6" class="rounded-lg mb-4">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Image Title 6</h3>
            <p class="text-gray-600 dark:text-gray-300">Description of image 6.</p>
        </div>
    </div>
</div>

관련 구성 요소

전자상거래 제품 갤러리

복잡하고 반응이 빠르며 어두운 테마와 호환되는 갤러리 구성 요소로, 미니멀한 디자인, 보색적인 색 구성표, 전자 상거래에 적합한 여러 인터랙티브 요소가 있습니다.

열다

기업/전문 갤러리 구성 요소

기업적/전문적 미학을 가진 반응형의 다재다능한 이미지 갤러리 구성 요소로, 숲/녹색 색상 팔레트를 사용합니다. 교육용 플랫폼용으로 설계되었으며 다크 모드를 지원하는 깨끗하고 신뢰할 수 있는 인터페이스를 제공합니다.

열다

미니멀리스트 갤러리 구성 요소

일몰/따뜻한 색 구성표가 있는 반응형 미니멀리스트 이미지 갤러리 구성 요소로, 기술/SaaS 애플리케이션에 적합합니다. 다크 모드 지원이 포함됩니다.

열다