CCHub Logo CCHub Tailwind Collection
구성 요소 제품 갤러리 Product Gallery 구성 요소

Product Gallery 구성 요소

머티리얼 디자인(Material Design) 원칙에 따라 설계된 간단한 반응형 제품 갤러리 구성 요소로, 대시보드에 적합한 생생한 색상과 다크 모드 지원을 특징으로 합니다. 이 구성 요소는 스타일링에 Tailwind CSS를 사용합니다.

미리 보기

HTML 코드 

<div class="flex flex-col items-center p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md">
    <h2 class="text-2xl font-semibold text-center text-gray-800 dark:text-gray-200">Product Gallery</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 w-full mt-4">
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4 hover:shadow-xl transition-shadow duration-300">
            <img src="https://picsum.photos/300/200?random=1" alt="Product 1" class="w-full h-48 object-cover rounded-md">
            <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200 mt-2">Product 1</h3>
            <p class="text-gray-600 dark:text-gray-400">Description of product 1.</p>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4 hover:shadow-xl transition-shadow duration-300">
            <img src="https://picsum.photos/300/200?random=2" alt="Product 2" class="w-full h-48 object-cover rounded-md">
            <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200 mt-2">Product 2</h3>
            <p class="text-gray-600 dark:text-gray-400">Description of product 2.</p>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4 hover:shadow-xl transition-shadow duration-300">
            <img src="https://picsum.photos/300/200?random=3" alt="Product 3" class="w-full h-48 object-cover rounded-md">
            <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200 mt-2">Product 3</h3>
            <p class="text-gray-600 dark:text-gray-400">Description of product 3.</p>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4 hover:shadow-xl transition-shadow duration-300">
            <img src="https://picsum.photos/300/200?random=4" alt="Product 4" class="w-full h-48 object-cover rounded-md">
            <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200 mt-2">Product 4</h3>
            <p class="text-gray-600 dark:text-gray-400">Description of product 4.</p>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4 hover:shadow-xl transition-shadow duration-300">
            <img src="https://picsum.photos/300/200?random=5" alt="Product 5" class="w-full h-48 object-cover rounded-md">
            <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200 mt-2">Product 5</h3>
            <p class="text-gray-600 dark:text-gray-400">Description of product 5.</p>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4 hover:shadow-xl transition-shadow duration-300">
            <img src="https://picsum.photos/300/200?random=6" alt="Product 6" class="w-full h-48 object-cover rounded-md">
            <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200 mt-2">Product 6</h3>
            <p class="text-gray-600 dark:text-gray-400">Description of product 6.</p>
        </div>
    </div>
</div>

관련 구성 요소

Watercolor_Artistic_Dating_Product_Gallery

'수채화/예술적' 디자인 스타일과 'Candy/Sweet' 색 구성표를 갖춘 복잡하고 반응이 빠른 제품 갤러리 구성 요소로 데이트 및 소셜 플랫폼에 적합합니다. 여러 대화형 요소, 다크 모드 지원 및 시맨틱 HTML을 제공합니다.

열다

Brutalist_RealEstate_Product_Gallery

부동산 리스팅을 위한 복잡하고 브루탈리즘 스타일의 제품 갤러리 구성 요소로, 보석 색조, 풍부한 채도가 높은 색상, 고대비 및 다크 모드 지원을 특징으로 합니다. 여러 대화형 요소로 속성 세부 정보를 표시하도록 설계되었습니다.

열다

Product Gallery 구성 요소

머티리얼 디자인 원칙에 따라 설계된 반응형 제품 갤러리 구성 요소로, 대시보드에 적합하고 다크 모드를 지원하는 어스 톤 색상을 특징으로 합니다.

열다