제품 갤러리

Product Gallery 구성 요소

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

                <div class="max-w-6xl mx-auto p-5">
    <h2 class="text-3xl font-bold text-center text-amber-500">Product Gallery</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-6">
        <!-- Product Card -->
        <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=1" alt="Product 1" class="w-full h-40 object-cover">
            <div class="p-4">
                <h3 class="text-xl font-semibold text-orange-300">Product Title 1</h3>
                <p class="text-gray-400">A brief description of the product that highlights its features.</p>
                <div class="flex items-center justify-between mt-4">
                    <span class="text-xl text-amber-500 font-bold">$29.99</span>
                    <button class="bg-amber-500 text-gray-800 font-semibold py-2 px-4 rounded-full hover:bg-orange-400 transition">Add to Cart</button>
                </div>
            </div>
        </div>
        <!-- Product Card -->
        <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=2" alt="Product 2" class="w-full h-40 object-cover">
            <div class="p-4">
                <h3 class="text-xl font-semibold text-orange-300">Product Title 2</h3>
                <p class="text-gray-400">A brief description of the product that highlights its features.</p>
                <div class="flex items-center justify-between mt-4">
                    <span class="text-xl text-amber-500 font-bold">$39.99</span>
                    <button class="bg-amber-500 text-gray-800 font-semibold py-2 px-4 rounded-full hover:bg-orange-400 transition">Add to Cart</button>
                </div>
            </div>
        </div>
        <!-- Product Card -->
        <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=3" alt="Product 3" class="w-full h-40 object-cover">
            <div class="p-4">
                <h3 class="text-xl font-semibold text-orange-300">Product Title 3</h3>
                <p class="text-gray-400">A brief description of the product that highlights its features.</p>
                <div class="flex items-center justify-between mt-4">
                    <span class="text-xl text-amber-500 font-bold">$19.99</span>
                    <button class="bg-amber-500 text-gray-800 font-semibold py-2 px-4 rounded-full hover:bg-orange-400 transition">Add to Cart</button>
                </div>
            </div>
        </div>
        <!-- Product Card -->
        <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=4" alt="Product 4" class="w-full h-40 object-cover">
            <div class="p-4">
                <h3 class="text-xl font-semibold text-orange-300">Product Title 4</h3>
                <p class="text-gray-400">A brief description of the product that highlights its features.</p>
                <div class="flex items-center justify-between mt-4">
                    <span class="text-xl text-amber-500 font-bold">$49.99</span>
                    <button class="bg-amber-500 text-gray-800 font-semibold py-2 px-4 rounded-full hover:bg-orange-400 transition">Add to Cart</button>
                </div>
            </div>
        </div>
        <!-- Product Card -->
        <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=5" alt="Product 5" class="w-full h-40 object-cover">
            <div class="p-4">
                <h3 class="text-xl font-semibold text-orange-300">Product Title 5</h3>
                <p class="text-gray-400">A brief description of the product that highlights its features.</p>
                <div class="flex items-center justify-between mt-4">
                    <span class="text-xl text-amber-500 font-bold">$59.99</span>
                    <button class="bg-amber-500 text-gray-800 font-semibold py-2 px-4 rounded-full hover:bg-orange-400 transition">Add to Cart</button>
                </div>
            </div>
        </div>
        <!-- Product Card -->
        <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=6" alt="Product 6" class="w-full h-40 object-cover">
            <div class="p-4">
                <h3 class="text-xl font-semibold text-orange-300">Product Title 6</h3>
                <p class="text-gray-400">A brief description of the product that highlights its features.</p>
                <div class="flex items-center justify-between mt-4">
                    <span class="text-xl text-amber-500 font-bold">$69.99</span>
                    <button class="bg-amber-500 text-gray-800 font-semibold py-2 px-4 rounded-full hover:bg-orange-400 transition">Add to Cart</button>
                </div>
            </div>
        </div>
    </div>
</div>

Product Gallery 구성 요소

Material Design 스타일로 디자인된 제품 갤러리 구성 요소로, 트라이어딕 색 구성표가 있습니다. 그리드 기반 레이아웃, 반응형 애니메이션이 특징이며 어두운 테마를 지원합니다. 갤러리에는 이미지와 아바타가 포함되어 있으며 대시보드에 적합합니다.

미리보기 열기

                <div class="p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
  <h2 class="text-2xl font-semibold text-gray-900 dark:text-white mb-4">Product Gallery</h2>
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
    <div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden shadow transition-transform transform hover:scale-105">
      <img src="https://picsum.photos/300/200?random=1" alt="Product Image 1" class="w-full h-40 object-cover">
      <div class="p-4">
        <h3 class="font-medium text-gray-800 dark:text-white">Product Title 1</h3>
        <p class="text-gray-600 dark:text-gray-300">Description of Product 1. This is a great product that offers many features.</p>
        <div class="flex items-center mt-2">
          <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-gray-700 dark:text-gray-200">User Name</span>
        </div>
      </div>
    </div>
    <div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden shadow transition-transform transform hover:scale-105">
      <img src="https://picsum.photos/300/200?random=2" alt="Product Image 2" class="w-full h-40 object-cover">
      <div class="p-4">
        <h3 class="font-medium text-gray-800 dark:text-white">Product Title 2</h3>
        <p class="text-gray-600 dark:text-gray-300">Description of Product 2. This is a great product that offers many features.</p>
        <div class="flex items-center mt-2">
          <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
          <span class="text-gray-700 dark:text-gray-200">User Name</span>
        </div>
      </div>
    </div>
    <div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden shadow transition-transform transform hover:scale-105">
      <img src="https://picsum.photos/300/200?random=3" alt="Product Image 3" class="w-full h-40 object-cover">
      <div class="p-4">
        <h3 class="font-medium text-gray-800 dark:text-white">Product Title 3</h3>
        <p class="text-gray-600 dark:text-gray-300">Description of Product 3. This is a great product that offers many features.</p>
        <div class="flex items-center mt-2">
          <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-gray-700 dark:text-gray-200">User Name</span>
        </div>
      </div>
    </div>
    <div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden shadow transition-transform transform hover:scale-105">
      <img src="https://picsum.photos/300/200?random=4" alt="Product Image 4" class="w-full h-40 object-cover">
      <div class="p-4">
        <h3 class="font-medium text-gray-800 dark:text-white">Product Title 4</h3>
        <p class="text-gray-600 dark:text-gray-300">Description of Product 4. This is a great product that offers many features.</p>
        <div class="flex items-center mt-2">
          <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
          <span class="text-gray-700 dark:text-gray-200">User Name</span>
        </div>
      </div>
    </div>
    <div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden shadow transition-transform transform hover:scale-105">
      <img src="https://picsum.photos/300/200?random=5" alt="Product Image 5" class="w-full h-40 object-cover">
      <div class="p-4">
        <h3 class="font-medium text-gray-800 dark:text-white">Product Title 5</h3>
        <p class="text-gray-600 dark:text-gray-300">Description of Product 5. This is a great product that offers many features.</p>
        <div class="flex items-center mt-2">
          <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-gray-700 dark:text-gray-200">User Name</span>
        </div>
      </div>
    </div>
  </div>
</div>

Product Gallery 구성 요소

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

미리보기 열기

                <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>

Product Gallery 구성 요소

다크 모드 UI용으로 설계된 반응형 제품 갤러리 구성 요소로, 소셜 미디어 네트워킹 인터페이스에 적합한 보색을 특징으로 합니다.

미리보기 열기

                <div class="bg-gray-800 text-white p-6 rounded-lg shadow-lg">
    <h2 class="text-xl font-bold mb-4">Product Gallery</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <!-- Product Item -->
        <div class="bg-gray-700 p-4 rounded-lg transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/200/300?random=1" alt="Product 1" class="w-full h-48 object-cover rounded-t-lg">
            <div class="mt-2">
                <h3 class="text-lg font-semibold">Product 1</h3>
                <p class="text-gray-300">Description of product 1 in this gallery.</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-400">by John Doe</span>
                </div>
            </div>
        </div>
        <!-- Product Item -->
        <div class="bg-gray-700 p-4 rounded-lg transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/200/300?random=2" alt="Product 2" class="w-full h-48 object-cover rounded-t-lg">
            <div class="mt-2">
                <h3 class="text-lg font-semibold">Product 2</h3>
                <p class="text-gray-300">Description of product 2 in this gallery.</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-400">by Jane Doe</span>
                </div>
            </div>
        </div>
        <!-- Product Item -->
        <div class="bg-gray-700 p-4 rounded-lg transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/200/300?random=3" alt="Product 3" class="w-full h-48 object-cover rounded-t-lg">
            <div class="mt-2">
                <h3 class="text-lg font-semibold">Product 3</h3>
                <p class="text-gray-300">Description of product 3 in this gallery.</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-400">by Alex Smith</span>
                </div>
            </div>
        </div>
        <!-- Additional Product Items can go here -->
    </div>
</div>

Product Gallery 구성 요소

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

미리보기 열기

                <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 구성 요소

소셜 미디어에 적합한 파스텔 색 구성표와 함께 잔인함 스타일로 디자인된 반응형 제품 갤러리 구성 요소입니다. 높은 대비, 대담한 디자인 요소가 특징이며 다크 모드에 최적화되어 있습니다.

미리보기 열기

                <div class="max-w-4xl mx-auto p-4">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 text-center mb-6">Product Gallery</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
        <div class="bg-pastel-yellow rounded-lg shadow-lg p-6 border-2 border-gray-300 dark:border-gray-600">
            <img src="https://picsum.photos/200/300?random=1" alt="Product 1" class="w-full h-40 object-cover rounded-md mb-2">
            <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>
            <button class="mt-2 px-4 py-2 bg-pastel-blue rounded text-white dark:bg-blue-700">View Details</button>
        </div>
        <div class="bg-pastel-green rounded-lg shadow-lg p-6 border-2 border-gray-300 dark:border-gray-600">
            <img src="https://picsum.photos/200/300?random=2" alt="Product 2" class="w-full h-40 object-cover rounded-md mb-2">
            <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>
            <button class="mt-2 px-4 py-2 bg-pastel-blue rounded text-white dark:bg-blue-700">View Details</button>
        </div>
        <div class="bg-pastel-purple rounded-lg shadow-lg p-6 border-2 border-gray-300 dark:border-gray-600">
            <img src="https://picsum.photos/200/300?random=3" alt="Product 3" class="w-full h-40 object-cover rounded-md mb-2">
            <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>
            <button class="mt-2 px-4 py-2 bg-pastel-blue rounded text-white dark:bg-blue-700">View Details</button>
        </div>
        <div class="bg-pastel-orange rounded-lg shadow-lg p-6 border-2 border-gray-300 dark:border-gray-600">
            <img src="https://picsum.photos/200/300?random=4" alt="Product 4" class="w-full h-40 object-cover rounded-md mb-2">
            <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Product 4</h3>
            <p class="text-gray-600 dark:text-gray-400">Description of product 4.</p>
            <button class="mt-2 px-4 py-2 bg-pastel-blue rounded text-white dark:bg-blue-700">View Details</button>
        </div>
        <div class="bg-pastel-pink rounded-lg shadow-lg p-6 border-2 border-gray-300 dark:border-gray-600">
            <img src="https://picsum.photos/200/300?random=5" alt="Product 5" class="w-full h-40 object-cover rounded-md mb-2">
            <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Product 5</h3>
            <p class="text-gray-600 dark:text-gray-400">Description of product 5.</p>
            <button class="mt-2 px-4 py-2 bg-pastel-blue rounded text-white dark:bg-blue-700">View Details</button>
        </div>
        <div class="bg-pastel-teal rounded-lg shadow-lg p-6 border-2 border-gray-300 dark:border-gray-600">
            <img src="https://picsum.photos/200/300?random=6" alt="Product 6" class="w-full h-40 object-cover rounded-md mb-2">
            <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Product 6</h3>
            <p class="text-gray-600 dark:text-gray-400">Description of product 6.</p>
            <button class="mt-2 px-4 py-2 bg-pastel-blue rounded text-white dark:bg-blue-700">View Details</button>
        </div>
    </div>
</div>

Product Gallery 구성 요소

브루탈리즘 디자인, 회색조 색 구성표 및 적당한 복잡성을 가진 제품 갤러리 구성 요소입니다. 대시보드 목적으로 설계되었으며 어두운 테마 지원으로 반응합니다.

미리보기 열기

                <div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white p-6">
  <div class="container mx-auto">
    <h2 class="text-3xl font-bold mb-6 border-b-4 border-gray-900 dark:border-white pb-2">Product Gallery</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <div class="border-4 border-gray-900 dark:border-white p-4 relative">
        <img src="https://picsum.photos/seed/product1/400/300" alt="Product Image" class="mb-4 border-4 border-gray-900 dark:border-white">
        <h3 class="text-xl font-bold mb-2">Product Name 1</h3>
        <p class="text-gray-700 dark:text-gray-300 mb-4">A brief description of the product goes here. It's a fantastic product that will change your life.</p>
        <span class="text-2xl font-bold absolute top-4 right-4">$199.99</span>
        <button class="mt-4 px-4 py-2 bg-gray-900 dark:bg-white text-white dark:text-gray-900 font-bold border-2 border-gray-900 dark:border-white hover:bg-gray-700 dark:hover:bg-gray-300 transition duration-300">Add to Cart</button>
      </div>
      <div class="border-4 border-gray-900 dark:border-white p-4 relative">
        <img src="https://picsum.photos/seed/product2/400/300" alt="Product Image" class="mb-4 border-4 border-gray-900 dark:border-white">
        <h3 class="text-xl font-bold mb-2">Product Name 2</h3>
        <p class="text-gray-700 dark:text-gray-300 mb-4">Another amazing product with features you won't believe. Get yours today!</p>
         <span class="text-2xl font-bold absolute top-4 right-4">$249.00</span>
        <button class="mt-4 px-4 py-2 bg-gray-900 dark:bg-white text-white dark:text-gray-900 font-bold border-2 border-gray-900 dark:border-white hover:bg-gray-700 dark:hover:bg-gray-300 transition duration-300">Add to Cart</button>
      </div>
      <div class="border-4 border-gray-900 dark:border-white p-4 relative">
        <img src="https://picsum.photos/seed/product3/400/300" alt="Product Image" class="mb-4 border-4 border-gray-900 dark:border-white">
        <h3 class="text-xl font-bold mb-2">Product Name 3</h3>
        <p class="text-gray-700 dark:text-gray-300 mb-4">You won't want to miss out on this one. Limited stock available!</p>
         <span class="text-2xl font-bold absolute top-4 right-4">$99.50</span>
        <button class="mt-4 px-4 py-2 bg-gray-900 dark:bg-white text-white dark:text-gray-900 font-bold border-2 border-gray-900 dark:border-white hover:bg-gray-700 dark:hover:bg-gray-300 transition duration-300">Add to Cart</button>
      </div>
    </div>
  </div>
</div>

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>

카테고리