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>

관련 구성 요소

스큐어모픽 크립토 갤러리

암호화폐 및 블록체인 애플리케이션을 위해 설계된 복잡한 스큐어모픽 갤러리 구성 요소로, 보색, 응답성 및 다크 모드 지원을 특징으로 합니다. 오목한 버튼과 엠보싱 프레임과 같은 실제 요소를 모방합니다.

열다

JewelTone_Photography_Gallery

보석 색조 색상과 깔끔한 타이포그래피 레이아웃이 있는 복잡하고 반응이 빠른 사진 갤러리 구성 요소로, 그리드 시스템과 다크 모드를 지원합니다. 사진작가 포트폴리오에 적합합니다.

열다

Skeuomorphism Grayscale Gallery 컴포넌트

스큐어모피즘 디자인, 그레이스케일 색 구성표 및 소셜 미디어를 위한 복잡한 레이아웃을 갖춘 반응형 사진 갤러리. 어두운 테마 지원이 포함됩니다.

열다