구성 요소 제품 갤러리 Product Gallery 구성 요소

Product Gallery 구성 요소

머티리얼 디자인(Material Design) 미학을 가미한 반응형 제품 갤러리 구성 요소로, 그리드 기반 레이아웃과 제품 또는 포트폴리오를 선보이는 데 적합한 대화형 요소를 특징으로 합니다. 다크 모드 지원이 포함되며 유사한 색 구성표를 사용합니다.

미리 보기

HTML 코드

<div class="container mx-auto p-4"">
  <!-- Product Grid -->
  <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"">
    <!-- Product Card 1 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden"">
      <img src="https://picsum.photos/seed/product1/400/300" alt="Product Image" class="w-full h-48 object-cover"">
      <div class="p-4"">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white"">Product Title 1</h3>
        <p class="text-gray-600 dark:text-gray-300 mt-1"">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <div class="flex items-center justify-between mt-3"">
          <span class="text-xl font-bold text-gray-900 dark:text-white"">$49.99</span>
          <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md transition duration-300"">View Details</button>
        </div>
      </div>
    </div>

    <!-- Product Card 2 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden"">
      <img src="https://picsum.photos/seed/product2/400/300" alt="Product Image" class="w-full h-48 object-cover"">
      <div class="p-4"">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white"">Product Title 2</h3>
        <p class="text-gray-600 dark:text-gray-300 mt-1"">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <div class="flex items-center justify-between mt-3"">
          <span class="text-xl font-bold text-gray-900 dark:text-white"">$29.99</span>
          <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md transition duration-300"">View Details</button>
        </div>
      </div>
    </div>

    <!-- Product Card 3 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden"">
      <img src="https://picsum.photos/seed/product3/400/300" alt="Product Image" class="w-full h-48 object-cover"">
      <div class="p-4"">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white"">Product Title 3</h3>
        <p class="text-gray-600 dark:text-gray-300 mt-1"">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <div class="flex items-center justify-between mt-3"">
          <span class="text-xl font-bold text-gray-900 dark:text-white"">$79.99</span>
          <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md transition duration-300"">View Details</button>
        </div>
      </div>
    </div>

    <!-- Product Card 4 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden"">
      <img src="https://picsum.photos/seed/product4/400/300" alt="Product Image" class="w-full h-48 object-cover"">
      <div class="p-4"">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white"">Product Title 4</h3>
        <p class="text-gray-600 dark:text-gray-300 mt-1"">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <div class="flex items-center justify-between mt-3"">
          <span class="text-xl font-bold text-gray-900 dark:text-white"">$19.99</span>
          <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md transition duration-300"">View Details</button>
        </div>
      </div>
    </div>
  </div>
</div>

관련 구성 요소

Product Gallery 구성 요소

3D 디자인 미학과 세피아/갈색 색상 구성표를 갖춘 복잡하고 반응이 빠른 제품 갤러리 구성 요소로, 기술/SaaS 애플리케이션에 적합합니다. 여러 대화형 요소와 다크 모드 지원이 포함됩니다.

열다

Product Gallery 구성 요소

뉴모피즘 스타일과 트라이어딕 색 구성표로 설계된 반응형 제품 갤러리 구성 요소로, 어두운 테마를 지원하여 작업이나 제품을 전시하는 데 적합합니다.

열다

Product Gallery 구성 요소

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

열다