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

Product Gallery 구성 요소

반응형 제품 갤러리 구성 요소에는 어두운 테마가 지원되며, 머티리얼 디자인 스타일, 어스 톤 색 구성표, 단순 복잡성, 전자 상거래용 구성 요소가 있습니다.

미리 보기

HTML 코드 

<div class="container mx-auto p-4 bg-gray-100 dark:bg-gray-800">
  <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
    <!-- Product Card 1 -->
    <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden">
      <img src="https://picsum.photos/seed/product1/400/300" alt="Product Image 1" class="w-full h-48 object-cover">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Product Title 1</h3>
        <p class="text-gray-600 dark:text-gray-300 mt-1">Short description of the product.</p>
        <div class="flex items-center justify-between mt-4">
          <span class="text-xl font-bold text-gray-800 dark:text-gray-100">$29.99</span>
          <button class="bg-green-600 text-white px-3 py-2 rounded-md hover:bg-green-700 dark:bg-green-700 dark:hover:bg-green-800">Add to Cart</button>
        </div>
      </div>
    </div>

    <!-- Product Card 2 -->
    <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden">
      <img src="https://picsum.photos/seed/product2/400/300" alt="Product Image 2" class="w-full h-48 object-cover">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Product Title 2</h3>
        <p class="text-gray-600 dark:text-gray-300 mt-1">Short description of the product.</p>
        <div class="flex items-center justify-between mt-4">
          <span class="text-xl font-bold text-gray-800 dark:text-gray-100">$39.50</span>
          <button class="bg-green-600 text-white px-3 py-2 rounded-md hover:bg-green-700 dark:bg-green-700 dark:hover:bg-green-800">Add to Cart</button>
        </div>
      </div>
    </div>

    <!-- Product Card 3 -->
    <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden">
      <img src="https://picsum.photos/seed/product3/400/300" alt="Product Image 3" class="w-full h-48 object-cover">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Product Title 3</h3>
        <p class="text-gray-600 dark:text-gray-300 mt-1">Short description of the product.</p>
        <div class="flex items-center justify-between mt-4">
          <span class="text-xl font-bold text-gray-800 dark:text-gray-100">$19.00</span>
          <button class="bg-green-600 text-white px-3 py-2 rounded-md hover:bg-green-700 dark:bg-green-700 dark:hover:bg-green-800">Add to Cart</button>
        </div>
      </div>
    </div>
  </div>
</div>

관련 구성 요소

Brutalist_RealEstate_Product_Gallery

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

열다

Product Gallery 구성 요소

미묘한 마이크로 인터랙션, 파스텔 색상 구성표 및 완전한 다크 모드 지원으로 설계된 복잡하고 반응이 빠른 제품 갤러리 구성 요소로, 포럼 또는 커뮤니티 플랫폼에 적합합니다. 대화형 이미지 선택 및 자세한 제품 정보를 제공합니다.

열다

Product Gallery 구성 요소

어스 톤이 있는 간단하고 반응이 빠른 제품 갤러리 구성 요소로, 다크 모드 및 콘텐츠 소비에 최적화되어 있습니다. 항목을 표시하는 블로그 또는 전자 상거래 사이트에 적합합니다.

열다