검색 구성 요소

카테고리

구성 요소 제품 갤러리

제품 갤러리

제품 이미지 모음

Product Gallery 구성 요소

Glassmorphism 디자인 스타일의 반응형 제품 갤러리 구성 요소로, 흐림 효과와 어두운 테마를 지원하는 젖빛 유리와 같은 반투명 요소를 특징으로 합니다. 제품 이미지와 사용자 아바타를 선보입니다.

                <div class="min-h-screen bg-gray-50 dark:bg-gray-900 flex items-center justify-center p-4">
    <div class="max-w-4xl w-full">
        <h2 class="text-2xl font-bold text-center mb-6 dark:text-white">Product Gallery</h2>
        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            <!-- Product Card -->
            <div class="bg-white dark:bg-gray-800 bg-opacity-90 backdrop-blur-lg rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow">
                <img src="https://picsum.photos/300/200?random=1" alt="Product 1" 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-400">Description of product 1 with details.</p>
                    <div class="mt-2 flex items-center">
                        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
                        <span class="text-sm text-gray-600 dark:text-gray-400">By John Doe</span>
                    </div>
                </div>
            </div>
            <!-- Product Card -->
            <div class="bg-white dark:bg-gray-800 bg-opacity-90 backdrop-blur-lg rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow">
                <img src="https://picsum.photos/300/200?random=2" alt="Product 2" 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-400">Description of product 2 with details.</p>
                    <div class="mt-2 flex items-center">
                        <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
                        <span class="text-sm text-gray-600 dark:text-gray-400">By Jane Smith</span>
                    </div>
                </div>
            </div>
            <!-- Product Card -->
            <div class="bg-white dark:bg-gray-800 bg-opacity-90 backdrop-blur-lg rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow">
                <img src="https://picsum.photos/300/200?random=3" alt="Product 3" 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-400">Description of product 3 with details.</p>
                    <div class="mt-2 flex items-center">
                        <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
                        <span class="text-sm text-gray-600 dark:text-gray-400">By Mike Johnson</span>
                    </div>
                </div>
            </div>
            <!-- Product Card -->
            <div class="bg-white dark:bg-gray-800 bg-opacity-90 backdrop-blur-lg rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow">
                <img src="https://picsum.photos/300/200?random=4" alt="Product 4" 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-400">Description of product 4 with details.</p>
                    <div class="mt-2 flex items-center">
                        <img src="https://randomuser.me/api/portraits/men/4.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
                        <span class="text-sm text-gray-600 dark:text-gray-400">By Sarah Connor</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

ProductGalleryComponent

브루탈리즘 디자인, 반응형 및 다크 모드 지원을 제공하는 제품 갤러리 구성 요소.

열다 미리 보기

                <section class="text-gray-600 body-font">
  <div class="container px-5 py-24 mx-auto">
    <div class="flex flex-wrap -m-4">
      <div class="lg:w-1/4 md:w-1/2 p-4 w-full">
        <a class="block relative h-48 rounded overflow-hidden">
          <img alt="ecommerce" class="object-cover object-center w-full h-full block" src="https://picsum.photos/420/260?random=1">
        </a>
        <div class="mt-4">
          <h3 class="text-gray-500 text-xs tracking-widest title-font mb-1">CATEGORY</h3>
          <h2 class="text-gray-900 title-font text-lg font-medium">The Catalyzer</h2>
          <p class="mt-1">$16.00</p>
        </div>
      </div>
      <div class="lg:w-1/4 md:w-1/2 p-4 w-full">
        <a class="block relative h-48 rounded overflow-hidden">
          <img alt="ecommerce" class="object-cover object-center w-full h-full block" src="https://picsum.photos/420/260?random=2">
        </a>
        <div class="mt-4">
          <h3 class="text-gray-500 text-xs tracking-widest title-font mb-1">CATEGORY</h3>
          <h2 class="text-gray-900 title-font text-lg font-medium">Shooting Stars</h2>
          <p class="mt-1">$21.15</p>
        </div>
      </div>
      <div class="lg:w-1/4 md:w-1/2 p-4 w-full">
        <a class="block relative h-48 rounded overflow-hidden">
          <img alt="ecommerce" class="object-cover object-center w-full h-full block" src="https://picsum.photos/420/260?random=3">
        </a>
        <div class="mt-4">
          <h3 class="text-gray-500 text-xs tracking-widest title-font mb-1">CATEGORY</h3>
          <h2 class="text-gray-900 title-font text-lg font-medium">Neptune</h2>
          <p class="mt-1">$12.00</p>
        </div>
      </div>
      <div class="lg:w-1/4 md:w-1/2 p-4 w-full">
        <a class="block relative h-48 rounded overflow-hidden">
          <img alt="ecommerce" class="object-cover object-center w-full h-full block" src="https://picsum.photos/420/260?random=4">
        </a>
        <div class="mt-4">
          <h3 class="text-gray-500 text-xs tracking-widest title-font mb-1">CATEGORY</h3>
          <h2 class="text-gray-900 title-font text-lg font-medium">The 400 Blows</h2>
          <p class="mt-1">$18.40</p>
        </div>
      </div>
      <div class="lg:w-1/4 md:w-1/2 p-4 w-full">
        <a class="block relative h-48 rounded overflow-hidden">
          <img alt="ecommerce" class="object-cover object-center w-full h-full block" src="https://picsum.photos/420/260?random=5">
        </a>
        <div class="mt-4">
          <h3 class="text-gray-500 text-xs tracking-widest title-font mb-1">CATEGORY</h3>
          <h2 class="text-gray-900 title-font text-lg font-medium">The Catalyzer</h2>
          <p class="mt-1">$16.00</p>
        </div>
      </div>
      <div class="lg:w-1/4 md:w-1/2 p-4 w-full">
        <a class="block relative h-48 rounded overflow-hidden">
          <img alt="ecommerce" class="object-cover object-center w-full h-full block" src="https://picsum.photos/420/260?random=6">
        </a>
        <div class="mt-4">
          <h3 class="text-gray-500 text-xs tracking-widest title-font mb-1">CATEGORY</h3>
          <h2 class="text-gray-900 title-font text-lg font-medium">Shooting Stars</h2>
          <p class="mt-1">$21.15</p>
        </div>
      </div>
      <div class="lg:w-1/4 md:w-1/2 p-4 w-full">
        <a class="block relative h-48 rounded overflow-hidden">
          <img alt="ecommerce" class="object-cover object-center w-full h-full block" src="https://picsum.photos/420/260?random=7">
        </a>
        <div class="mt-4">
          <h3 class="text-gray-500 text-xs tracking-widest title-font mb-1">CATEGORY</h3>
          <h2 class="text-gray-900 title-font text-lg font-medium">Neptune</h2>
          <p class="mt-1">$12.00</p>
        </div>
      </div>
      <div class="lg:w-1/4 md:w-1/2 p-4 w-full">
        <a class="block relative h-48 rounded overflow-hidden">
          <img alt="ecommerce" class="object-cover object-center w-full h-full block" src="https://picsum.photos/420/260?random=8">
        </a>
        <div class="mt-4">
          <h3 class="text-gray-500 text-xs tracking-widest title-font mb-1">CATEGORY</h3>
          <h2 class="text-gray-900 title-font text-lg font-medium">The 400 Blows</h2>
          <p class="mt-1">$18.40</p>
        </div>
      </div>
    </div>
  </div>
  <style>
    .text-gray-600 {
      --tw-text-opacity: 1;
      color: rgba(75, 85, 99, var(--tw-text-opacity));
    }
    .body-font {
      font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    }
    .container {
      width: 100%;
      margin-right: auto;
      margin-left: auto;
    }
    .px-5 {
      padding-left: 1.25rem;
      padding-right: 1.25rem;
    }
    .py-24 {
      padding-top: 6rem;
      padding-bottom: 6rem;
    }
    .mx-auto {
      margin-left: auto;
      margin-right: auto;
    }
    .flex {
      display: flex;
    }
    .flex-wrap {
      flex-wrap: wrap;
    }
    .-m-4 {
      margin: -1rem;
    }
    .lg\:w-1\/4 {
      width: 25%;
    }
    .md\:w-1\/2 {
      width: 50%;
    }
    .p-4 {
      padding: 1rem;
    }
    .w-full {
      width: 100%;
    }
    .block {
      display: block;
    }
    .relative {
      position: relative;
    }
    .h-48 {
      height: 12rem;
    }
    .rounded {
      border-radius: 0.25rem;
    }
    .overflow-hidden {
      overflow: hidden;
    }
    .object-cover {
      object-fit: cover;
    }
    .object-center {
      object-position: center;
    }
    .mt-4 {
      margin-top: 1rem;
    }
    .text-gray-500 {
      --tw-text-opacity: 1;
      color: rgba(107, 114, 128, var(--tw-text-opacity));
    }
    .text-xs {
      font-size: 0.75rem;
      line-height: 1rem;
    }
    .tracking-widest {
      letter-spacing: 0.1em;
    }
    .title-font {
      font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    }
    .mb-1 {
      margin-bottom: 0.25rem;
    }
    .text-gray-900 {
      --tw-text-opacity: 1;
      color: rgba(17, 24, 39, var(--tw-text-opacity));
    }
    .text-lg {
      font-size: 1.125rem;
      line-height: 1.75rem;
    }
    .font-medium {
      font-weight: 500;
    }
    .mt-1 {
      margin-top: 0.25rem;
    }
    @media (min-width: 768px) {
      .md\:-m-4 {
        margin: -1rem;
      }
      .md\:p-4 {
        padding: 1rem;
      }
    }
    @media (min-width: 1024px) {
      .lg\:-m-4 {
        margin: -1rem;
      }
      .lg\:p-4 {
        padding: 1rem;
      }
    }
    /* Brutalism Styles - Example */
    .text-gray-600 {
      color: black;
    }
    .text-gray-900 {
      color: black;
    }
    .text-gray-500 {
      color: black;
    }
    .border {
      border: 2px solid black;
    }
    .rounded {
      border-radius: 0;
    }
    /* Dark Mode */
    @media (prefers-color-scheme: dark) {
      .dark\:text-white {
        color: white;
      }
      .dark\:text-gray-300 {
        color: #d1d5db;
      }
      .dark\:bg-black {
        background-color: black;
      }
      .dark\:border-white {
        border-color: white;
      }
    }
    body {
        background-color: white;
        color: black;
    }
    @media (prefers-color-scheme: dark) {
      body {
        background-color: black;
        color: white;
      }
       .text-gray-600, .text-gray-900, .text-gray-500 {
        color: white;
      }
      .border {
        border-color: white;
      }
    }
  </style>
</section>

Product Gallery 구성 요소

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

열다 미리 보기

                <div class="container mx-auto p-4">
  <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
    <!-- Product Card 1 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
      <img src="https://picsum.photos/seed/product1/500/300" alt="Product Image 1" class="w-full h-48 object-cover">
      <div class="p-4">
        <h3 class="text-gray-900 dark:text-white font-semibold text-lg mb-2">Product Title 1</h3>
        <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <div class="flex items-center justify-between">
          <span class="text-gray-900 dark:text-white font-bold text-xl">$19.99</span>
          <button class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">Add to Cart</button>
        </div>
      </div>
    </div>
    <!-- Product Card 2 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
      <img src="https://picsum.photos/seed/product2/500/300" alt="Product Image 2" class="w-full h-48 object-cover">
      <div class="p-4">
        <h3 class="text-gray-900 dark:text-white font-semibold text-lg mb-2">Product Title 2</h3>
        <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <div class="flex items-center justify-between">
          <span class="text-gray-900 dark:text-white font-bold text-xl">$29.99</span>
          <button class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">Add to Cart</button>
        </div>
      </div>
    </div>
    <!-- Product Card 3 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
      <img src="https://picsum.photos/seed/product3/500/300" alt="Product Image 3" class="w-full h-48 object-cover">
      <div class="p-4">
        <h3 class="text-gray-900 dark:text-white font-semibold text-lg mb-2">Product Title 3</h3>
        <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <div class="flex items-center justify-between">
          <span class="text-gray-900 dark:text-white font-bold text-xl">$39.99</span>
          <button class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">Add to Cart</button>
        </div>
      </div>
    </div>
     <!-- Product Card 4 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
      <img src="https://picsum.photos/seed/product4/500/300" alt="Product Image 4" class="w-full h-48 object-cover">
      <div class="p-4">
        <h3 class="text-gray-900 dark:text-white font-semibold text-lg mb-2">Product Title 4</h3>
        <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <div class="flex items-center justify-between">
          <span class="text-gray-900 dark:text-white font-bold text-xl">$49.99</span>
          <button class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">Add to Cart</button>
        </div>
      </div>
    </div>
  </div>
</div>

Product Gallery 구성 요소

microinteractions가 있는 제품 갤러리 구성 요소입니다.

열다 미리 보기

                
<div class="container mx-auto px-5 py-2 lg:px-32 lg:pt-12">
  <div class="-m-1 flex flex-wrap md:-m-2">
    <div class="flex w-1/3 flex-wrap">
      <div class="w-full p-1 md:p-2 transform transition duration-500 ease-in-out hover:scale-105">
        <img
          alt="gallery"
          class="block h-full w-full rounded-lg object-cover object-center"
          src="https://picsum.photos/500/300?random=1" />
      </div>
    </div>
    <div class="flex w-1/3 flex-wrap">
      <div class="w-full p-1 md:p-2 transform transition duration-500 ease-in-out hover:scale-105">
        <img
          alt="gallery"
          class="block h-full w-full rounded-lg object-cover object-center"
          src="https://picsum.photos/500/300?random=2" />
      </div>
    </div>
    <div class="flex w-1/3 flex-wrap">
      <div class="w-full p-1 md:p-2 transform transition duration-500 ease-in-out hover:scale-105">
        <img
          alt="gallery"
          class="block h-full w-full rounded-lg object-cover object-center"
          src="https://picsum.photos/500/300?random=3" />
      </div>
    </div>
    <div class="flex w-1/3 flex-wrap">
      <div class="w-full p-1 md:p-2 transform transition duration-500 ease-in-out hover:scale-105">
        <img
          alt="gallery"
          class="block h-full w-full rounded-lg object-cover object-center"
          src="https://picsum.photos/500/300?random=4" />
      </div>
    </div>
    <div class="flex w-1/3 flex-wrap">
      <div class="w-full p-1 md:p-2 transform transition duration-500 ease-in-out hover:scale-105">
        <img
          alt="gallery"
          class="block h-full w-full rounded-lg object-cover object-center"
          src="https://picsum.photos/500/300?random=5" />
      </div>
    </div>
    <div class="flex w-1/3 flex-wrap">
      <div class="w-full p-1 md:p-2 transform transition duration-500 ease-in-out hover:scale-105">
        <img
          alt="gallery"
          class="block h-full w-full rounded-lg object-cover object-center"
          src="https://picsum.photos/500/300?random=6" />
      </div>
    </div>
  </div>
</div>

Product Gallery 구성 요소

Glassmorphism Product Gallery Component는 반응형 효과와 어두운 테마를 지원합니다.

열다 미리 보기

                <div class="container mx-auto px-4 py-8">
  <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
    </div>
    </div>
  </div>
</div>

제품 갤러리 구성 요소 - Material Design

Material Design에서 영감을 받은 Product Gallery 구성 요소에는 반응형 디자인, 호버 효과 및 어두운 테마 지원이 포함되어 있습니다. Tailwind CSS를 사용합니다.

열다 미리 보기

                <div class="container mx-auto px-5 py-2 lg:px-32 lg:pt-12">
  <div class="dark:bg-gray-800 dark:text-white">
    <div class="-m-1 flex flex-wrap md:-m-2">
      <div class="flex w-1/3 flex-wrap">
        <div class="w-full p-1 md:p-2">
          <img
            alt="gallery"
            class="block h-full w-full rounded-lg object-cover object-center shadow-md transition ease-in-out hover:-translate-y-1 hover:scale-105"
            src="https://picsum.photos/500/300?random=1"
          />
        </div>
      </div>
      <div class="flex w-1/3 flex-wrap">
        <div class="w-full p-1 md:p-2">
          <img
            alt="gallery"
            class="block h-full w-full rounded-lg object-cover object-center shadow-md transition ease-in-out hover:-translate-y-1 hover:scale-105"
            src="https://picsum.photos/500/300?random=2"
          />
        </div>
      </div>
      <div class="flex w-1/3 flex-wrap">
        <div class="w-full p-1 md:p-2">
          <img
            alt="gallery"
            class="block h-full w-full rounded-lg object-cover object-center shadow-md transition ease-in-out hover:-translate-y-1 hover:scale-105"
            src="https://picsum.photos/500/300?random=3"
          />
        </div>
      </div>
      <div class="flex w-1/3 flex-wrap">
        <div class="w-full p-1 md:p-2">
          <img
            alt="gallery"
            class="block h-full w-full rounded-lg object-cover object-center shadow-md transition ease-in-out hover:-translate-y-1 hover:scale-105"
            src="https://picsum.photos/500/300?random=4"
          />
        </div>
      </div>
      <div class="flex w-1/3 flex-wrap">
        <div class="w-full p-1 md:p-2">
          <img
            alt="gallery"
            class="block h-full w-full rounded-lg object-cover object-center shadow-md transition ease-in-out hover:-translate-y-1 hover:scale-105"
            src="https://picsum.photos/500/300?random=5"
          />
        </div>
      </div>
      <div class="flex w-1/3 flex-wrap">
        <div class="w-full p-1 md:p-2">
          <img
            alt="gallery"
            class="block h-full w-full rounded-lg object-cover object-center shadow-md transition ease-in-out hover:-translate-y-1 hover:scale-105"
            src="https://picsum.photos/500/300?random=6"
          />
        </div>
      </div>
    </div>
  </div>
</div>

Product Gallery 구성 요소

레트로/빈티지 미학을 가미한 반응형 제품 갤러리로, 다크 모드를 지원합니다. 여기에는 플레이스홀더 서비스에서 생성된 이미지와 아바타가 포함됩니다.

열다 미리 보기

                <div class="max-w-7xl mx-auto p-8">
    <h2 class="text-4xl font-bold text-center text-gray-800 dark:text-gray-100 mb-6">Retro Product Gallery</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/200?random=1" alt="Product 1" class="w-full h-48 object-cover">
            <div class="p-4">
                <h3 class="font-semibold text-xl text-gray-900 dark:text-gray-200">Product Title 1</h3>
                <p class="text-gray-600 dark:text-gray-400">$19.99</p>
                <div class="flex items-center mt-2">
                    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
                    <span class="text-gray-700 dark:text-gray-300">Seller Name</span>
                </div>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/200?random=2" alt="Product 2" class="w-full h-48 object-cover">
            <div class="p-4">
                <h3 class="font-semibold text-xl text-gray-900 dark:text-gray-200">Product Title 2</h3>
                <p class="text-gray-600 dark:text-gray-400">$29.99</p>
                <div class="flex items-center mt-2">
                    <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
                    <span class="text-gray-700 dark:text-gray-300">Seller Name</span>
                </div>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/200?random=3" alt="Product 3" class="w-full h-48 object-cover">
            <div class="p-4">
                <h3 class="font-semibold text-xl text-gray-900 dark:text-gray-200">Product Title 3</h3>
                <p class="text-gray-600 dark:text-gray-400">$39.99</p>
                <div class="flex items-center mt-2">
                    <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
                    <span class="text-gray-700 dark:text-gray-300">Seller Name</span>
                </div>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/200?random=4" alt="Product 4" class="w-full h-48 object-cover">
            <div class="p-4">
                <h3 class="font-semibold text-xl text-gray-900 dark:text-gray-200">Product Title 4</h3>
                <p class="text-gray-600 dark:text-gray-400">$49.99</p>
                <div class="flex items-center mt-2">
                    <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
                    <span class="text-gray-700 dark:text-gray-300">Seller Name</span>
                </div>
            </div>
        </div>
    </div>
</div>

Product Gallery 구성 요소

다크 모드용으로 설계된 반응형 제품 갤러리 구성 요소로, Tailwind CSS를 사용하여 이미지와 아바타를 제공합니다.

열다 미리 보기

                <div class="bg-gray-900 text-white p-5 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold 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-800 rounded-lg overflow-hidden transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=1" alt="Product Image" class="w-full h-40 object-cover">
            <div class="p-4">
                <h3 class="font-semibold text-xl">Product Title 1</h3>
                <p class="text-gray-400">$29.99</p>
            </div>
        </div>
        <div class="bg-gray-800 rounded-lg overflow-hidden transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=2" alt="Product Image" class="w-full h-40 object-cover">
            <div class="p-4">
                <h3 class="font-semibold text-xl">Product Title 2</h3>
                <p class="text-gray-400">$39.99</p>
            </div>
        </div>
        <div class="bg-gray-800 rounded-lg overflow-hidden transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=3" alt="Product Image" class="w-full h-40 object-cover">
            <div class="p-4">
                <h3 class="font-semibold text-xl">Product Title 3</h3>
                <p class="text-gray-400">$49.99</p>
            </div>
        </div>
        <div class="bg-gray-800 rounded-lg overflow-hidden transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=4" alt="Product Image" class="w-full h-40 object-cover">
            <div class="p-4">
                <h3 class="font-semibold text-xl">Product Title 4</h3>
                <p class="text-gray-400">$59.99</p>
            </div>
        </div>
        <div class="bg-gray-800 rounded-lg overflow-hidden transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=5" alt="Product Image" class="w-full h-40 object-cover">
            <div class="p-4">
                <h3 class="font-semibold text-xl">Product Title 5</h3>
                <p class="text-gray-400">$69.99</p>
            </div>
        </div>
        <div class="bg-gray-800 rounded-lg overflow-hidden transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=6" alt="Product Image" class="w-full h-40 object-cover">
            <div class="p-4">
                <h3 class="font-semibold text-xl">Product Title 6</h3>
                <p class="text-gray-400">$79.99</p>
            </div>
        </div>
    </div>
    <div class="mt-6">
        <h2 class="text-xl font-semibold mb-2">Featured Seller</h2>
        <div class="flex items-center bg-gray-800 p-3 rounded-lg">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-4">
            <div>
                <p class="font-semibold">John Doe</p>
                <p class="text-gray-400">Best Seller</p>
            </div>
        </div>
    </div>
</div>