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

Product Gallery 구성 요소

반응형 제품 갤러리 구성 요소로, 매력적인 마이크로 인터랙션과 어스 톤에 중점을 둔 항목을 보여줍니다.

미리 보기

HTML 코드 

<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg">
  <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Product Gallery</h2>
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    <div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden transform hover:scale-105 transition-transform duration-300">
      <img src="https://picsum.photos/200/300?random=1" alt="Product 1" class="w-full h-48 object-cover" />
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Product 1</h3>
        <p class="text-gray-600 dark:text-gray-400">Description of product 1.</p>
      </div>
    </div>
    <div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden transform hover:scale-105 transition-transform duration-300">
      <img src="https://picsum.photos/200/300?random=2" alt="Product 2" class="w-full h-48 object-cover" />
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Product 2</h3>
        <p class="text-gray-600 dark:text-gray-400">Description of product 2.</p>
      </div>
    </div>
    <div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden transform hover:scale-105 transition-transform duration-300">
      <img src="https://picsum.photos/200/300?random=3" alt="Product 3" class="w-full h-48 object-cover" />
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Product 3</h3>
        <p class="text-gray-600 dark:text-gray-400">Description of product 3.</p>
      </div>
    </div>
  </div>

  <div class="mt-6">
    <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">User Reviews</h3>
    <div class="flex items-center mt-2">
      <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-600 mr-2" />
      <div>
        <strong class="text-gray-700 dark:text-gray-300">John Doe</strong>
        <p class="text-gray-600 dark:text-gray-400">Great product! Really enjoyed using it.</p>
      </div>
    </div>
  </div>
</div>

관련 구성 요소

Watercolor_Artistic_Dating_Product_Gallery

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

열다

Product Gallery 구성 요소

glassmorphism 디자인 스타일, 밝은 액센트가 있는 흑백 색 구성표를 갖춘 간단하고 반응이 빠른 제품 갤러리 구성 요소로 구인 게시판 또는 경력 플랫폼에 적합합니다. 다크 모드 지원이 포함됩니다.

열다

Product Gallery 구성 요소

깊이를 위해 3D 요소로 디자인된 간단한 제품 갤러리 구성 요소로, 트라이어딕 색 구성표를 사용합니다. 반응형이며 작업이나 제품을 전시하는 데 적합한 어두운 테마를 지원합니다.

열다