CCHub Logo CCHub Tailwind Collection
Components Product Gallery Product Gallery Component

Product Gallery Component

A product gallery component with microinteractions.

Preview

HTML Code 


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

Related Components

Product Gallery Component

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

Open

Product Gallery Component

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

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