Search Components

Product Gallery

Collection of product images

Product Gallery Component

A responsive product gallery component designed with Material Design principles, featuring earth tone colors, suitable for dashboards and supporting dark mode.

Open Preview

                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-6 bg-gray-100 dark:bg-gray-800">
  <div class="bg-white dark:bg-gray-900 shadow-lg rounded-lg overflow-hidden">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200" alt="Product Image" />
    <div class="p-4">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product 1</h2>
      <p class="text-gray-600 dark:text-gray-400">A beautiful product description goes here.</p>
      <div class="flex items-center mt-4">
        <div class="flex-shrink-0">
          <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" />
        </div>
        <div class="ml-3">
          <span class="text-sm font-semibold text-gray-800 dark:text-gray-200">Seller Name</span>
        </div>
      </div>
    </div>
  </div>
  <div class="bg-white dark:bg-gray-900 shadow-lg rounded-lg overflow-hidden">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/300/201" alt="Product Image" />
    <div class="p-4">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product 2</h2>
      <p class="text-gray-600 dark:text-gray-400">A beautiful product description goes here.</p>
      <div class="flex items-center mt-4">
        <div class="flex-shrink-0">
          <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" />
        </div>
        <div class="ml-3">
          <span class="text-sm font-semibold text-gray-800 dark:text-gray-200">Seller Name</span>
        </div>
      </div>
    </div>
  </div>
  <div class="bg-white dark:bg-gray-900 shadow-lg rounded-lg overflow-hidden">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/300/202" alt="Product Image" />
    <div class="p-4">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product 3</h2>
      <p class="text-gray-600 dark:text-gray-400">A beautiful product description goes here.</p>
      <div class="flex items-center mt-4">
        <div class="flex-shrink-0">
          <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" />
        </div>
        <div class="ml-3">
          <span class="text-sm font-semibold text-gray-800 dark:text-gray-200">Seller Name</span>
        </div>
      </div>
    </div>
  </div>
</div>

Product Gallery Component

A responsive product gallery component designed with neumorphism style and a triadic color scheme, suitable for showcasing work or products, with dark theme support.

Open Preview

                <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-lg">  <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-4">Product Gallery</h2>  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">    <div class="bg-white dark:bg-gray-700 shadow-xl rounded-lg p-4 transition-transform transform hover:scale-105">      <img src="https://picsum.photos/id/1012/300/200" alt="Product 1" class="rounded-lg mb-2">      <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Product Title 1</h3>      <p class="text-gray-600 dark:text-gray-300">Short description of the product.</p>      <div class="flex items-center mt-2">        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="rounded-full w-10 h-10 border-2 border-gray-300 dark:border-gray-600">        <span class="ml-2 text-gray-700 dark:text-gray-400">User Name</span>      </div>    </div>    <div class="bg-white dark:bg-gray-700 shadow-xl rounded-lg p-4 transition-transform transform hover:scale-105">      <img src="https://picsum.photos/id/1013/300/200" alt="Product 2" class="rounded-lg mb-2">      <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Product Title 2</h3>      <p class="text-gray-600 dark:text-gray-300">Short description of the product.</p>      <div class="flex items-center mt-2">        <img src="https://randomuser.me/api/portraits/women/31.jpg" alt="User Avatar" class="rounded-full w-10 h-10 border-2 border-gray-300 dark:border-gray-600">        <span class="ml-2 text-gray-700 dark:text-gray-400">User Name</span>      </div>    </div>    <div class="bg-white dark:bg-gray-700 shadow-xl rounded-lg p-4 transition-transform transform hover:scale-105">      <img src="https://picsum.photos/id/1014/300/200" alt="Product 3" class="rounded-lg mb-2">      <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Product Title 3</h3>      <p class="text-gray-600 dark:text-gray-300">Short description of the product.</p>      <div class="flex items-center mt-2">        <img src="https://randomuser.me/api/portraits/men/31.jpg" alt="User Avatar" class="rounded-full w-10 h-10 border-2 border-gray-300 dark:border-gray-600">        <span class="ml-2 text-gray-700 dark:text-gray-400">User Name</span>      </div>    </div>    <div class="bg-white dark:bg-gray-700 shadow-xl rounded-lg p-4 transition-transform transform hover:scale-105">      <img src="https://picsum.photos/id/1015/300/200" alt="Product 4" class="rounded-lg mb-2">      <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Product Title 4</h3>      <p class="text-gray-600 dark:text-gray-300">Short description of the product.</p>      <div class="flex items-center mt-2">        <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="User Avatar" class="rounded-full w-10 h-10 border-2 border-gray-300 dark:border-gray-600">        <span class="ml-2 text-gray-700 dark:text-gray-400">User Name</span>      </div>    </div>  </div></div>

A responsive product gallery component using Tailwind CSS with a Neumorphic design style, complementary color scheme, and complex layout suitable for business websites. Includes dark mode support and uses images from picsum.photos.

Open Preview

                <div class="container mx-auto p-10 bg-gray-200 dark:bg-gray-800">
  <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-10">
    <!-- Product Card 1 -->
    <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
      <img src="https://picsum.photos/seed/product1/400/300" alt="Product Image 1" class="rounded-lg mb-4 shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark">
      <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Product Title 1</h3>
      <p class="text-gray-600 dark:text-gray-300 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <div class="flex items-center justify-between">
        <span class="text-lg font-bold text-blue-600 dark:text-blue-400">$99.99</span>
        <button class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark">Add to Cart</button>
      </div>
    </div>

    <!-- Product Card 2 -->
    <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
      <img src="https://picsum.photos/seed/product2/400/300" alt="Product Image 2" class="rounded-lg mb-4 shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark">
      <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Product Title 2</h3>
      <p class="text-gray-600 dark:text-gray-300 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <div class="flex items-center justify-between">
        <span class="text-lg font-bold text-green-600 dark:text-green-400">$149.99</span>
        <button class="bg-green-500 hover:bg-green-600 text-white py-2 px-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark">Add to Cart</button>
      </div>
    </div>

    <!-- Product Card 3 -->
    <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-neumorphic-light dark:shadow-inner-neumorphic-dark">
      <img src="https://picsum.photos/seed/product3/400/300" alt="Product Image 3" class="rounded-lg mb-4 shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark">
      <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Product Title 3</h3>
      <p class="text-gray-600 dark:text-gray-300 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <div class="flex items-center justify-between">
        <span class="text-lg font-bold text-red-600 dark:text-red-400">$199.99</span>
        <button class="bg-red-500 hover:bg-red-600 text-white py-2 px-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark">Add to Cart</button>
      </div>
    </div>

    <!-- Product Card 4 -->
    <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
      <img src="https://picsum.photos/seed/product4/400/300" alt="Product Image 4" class="rounded-lg mb-4 shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark">
      <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Product Title 4</h3>
      <p class="text-gray-600 dark:text-gray-300 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <div class="flex items-center justify-between">
        <span class="text-lg font-bold text-purple-600 dark:text-purple-400">$249.99</span>
        <button class="bg-purple-500 hover:bg-purple-600 text-white py-2 px-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark">Add to Cart</button>
      </div>
    </div>
     <!-- Product Card 5 -->
    <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
      <img src="https://picsum.photos/seed/product5/400/300" alt="Product Image 5" class="rounded-lg mb-4 shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark">
      <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Product Title 5</h3>
      <p class="text-gray-600 dark:text-gray-300 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <div class="flex items-center justify-between">
        <span class="text-lg font-bold text-yellow-600 dark:text-yellow-400">$299.99</span>
        <button class="bg-yellow-500 hover:bg-yellow-600 text-white py-2 px-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark">Add to Cart</button>
      </div>
    </div>
     <!-- Product Card 6 -->
    <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
      <img src="https://picsum.photos/seed/product6/400/300" alt="Product Image 6" class="rounded-lg mb-4 shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark">
      <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Product Title 6</h3>
      <p class="text-gray-600 dark:text-gray-300 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <div class="flex items-center justify-between">
        <span class="text-lg font-bold text-teal-600 dark:text-teal-400">$349.99</span>
        <button class="bg-teal-500 hover:bg-teal-600 text-white py-2 px-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark">Add to Cart</button>
      </div>
    </div>
  </div>
</div>

<style>
  /* Custom Neumorphic Shadows */
  .shadow-neumorphic-light {
    box-shadow: 7px 7px 15px #a7a7a7, -7px -7px 15px #ffffff;
  }
  .dark .shadow-neumorphic-dark {
    box-shadow: 7px 7px 15px #454545, -7px -7px 15px #b3b3b3;
  }
  .shadow-inner-neumorphic-light {
    box-shadow: inset 5px 5px 10px #a7a7a7, inset -5px -5px 10px #ffffff;
  }
   .dark .shadow-inner-neumorphic-dark {
    box-shadow: inset 5px 5px 10px #454545, inset -5px -5px 10px #b3b3b3;
  }
</style>

Product Gallery Component

A responsive product gallery with a retro/vintage style, featuring a complementary color scheme and designed for business/corporate websites with dark mode support.

Open Preview

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

A product gallery component designed in Material Design style with a triadic color scheme. It features grid-based layouts, responsive animations, and supports dark theme. The gallery includes images and avatars and is suitable for a dashboard.

Open Preview

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

Responsive Product Gallery Component with Dark Theme support, Material Design style, Earth tones color scheme, Simple complexity, for E-commerce purpose.

Open Preview

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

A responsive product gallery component designed for dark mode UI, featuring complementary colors, suitable for social media networking interfaces.

Open Preview

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

A simple product gallery component designed with 3D elements for depth, using a triadic color scheme. It's responsive and supports dark theme, suitable for showcasing work or products.

Open Preview

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

A responsive product gallery component designed in a brutalism style with a pastel color scheme suitable for social media. It features high contrast, bold design elements and is optimized for dark mode.

Open Preview

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

A product gallery component with a brutalist design, grayscale color scheme, and moderate complexity. It is designed for a dashboard purpose and is responsive with dark theme support.

Open Preview

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

Search Components

Categories

Product Gallery