Components Product Gallery Product Gallery Component

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.

Preview

HTML Code

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

Related Components

Watercolor_Artistic_Dating_Product_Gallery

A complex, responsive product gallery component with a 'Watercolor/Artistic' design style and 'Candy/Sweet' color scheme, suitable for dating and social platforms. Features multiple interactive elements, dark mode support, and semantic HTML.

Open

Product Gallery Component

A simple, responsive product gallery component with a glassmorphism design style, black and white color scheme with a bright accent, suitable for job boards or career platforms. Includes dark mode support.

Open

Product Gallery Component

A responsive product gallery component with Glassmorphism design style, featuring frosted glass-like translucent elements with blur effects and dark theme support. It showcases product images and user avatars.

Open