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

Product Gallery 구성 요소

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

미리 보기

HTML 코드 

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

관련 구성 요소

Product Gallery 구성 요소

레트로/빈티지 스타일의 반응형 제품 갤러리로, 보색 구성표가 특징이며 다크 모드를 지원하는 비즈니스/기업 웹사이트용으로 설계되었습니다.

열다

Product Gallery 구성 요소

Material Design 원칙을 기반으로 하는 Product Gallery 구성 요소로, 반응형 디자인과 어두운 테마 지원을 제공합니다. 자리 표시자 이미지를 포함합니다.

열다

Product Gallery 구성 요소

어두운 UI, 세피아/갈색 색 구성표가 있는 반응형 제품 갤러리 구성 요소로, 비즈니스/기업 웹 사이트에 적합합니다. 이미지, 제목, 설명 및 가격이 포함된 여러 제품 카드를 포함하며 다크 모드를 지원합니다.

열다