Image Grid

The layout is designed to showcase various categories or items using images and descriptive text. Each grid item features a high-quality image and a centered text overlay with a semi-transparent background

This tailwind example is contributed by R Thapa, on 01-Oct-2023. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Masonry, Image grid

Image gallery Grid

Author R Thapa

Tailwind v3.4 15.4k 11

Fork Fullscreen

<div class="flex flex-col md:grid md:grid-cols-3 gap-3">
  <div class="relative rounded overflow-hidden">
    <img src="https://source.unsplash.com/400x300/?hanging-planters" alt="Hanging Planters" class="w-full">
    <p
      class="cursor-pointer absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center text-2xl text-center text-white font-roboto font-medium group-hover:bg-opacity-60 transition">
      Hanging Planters
    </p>
  </div>
  <div class="relative rounded overflow-hidden">
    <img src="https://source.unsplash.com/400x300/?planter-stand" alt="Planter Stand with Pots" class="w-full">
    <p
      class="cursor-pointer absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center text-2xl text-center text-white font-roboto font-medium group-hover:bg-opacity-60 transition">
      Planter Stand with Pots
    </p>
  </div>
  <div class="relative rounded overflow-hidden">
    <img src="https://source.unsplash.com/400x300/?watering-cans" alt="Watering Cans" class="w-full">
    <p
      class="cursor-pointer absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center text-2xl text-center text-white font-roboto font-medium group-hover:bg-opacity-60 transition">
      Watering Cans
    </p>
  </div>
  <div class="relative rounded overflow-hidden">
    <img src="https://source.unsplash.com/400x300/?metal-planters" alt="Metal Planters" class="w-full">
    <p
      class="cursor-pointer absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center text-2xl text-center text-white font-roboto font-medium group-hover:bg-opacity-60 transition">
      Metal Planters
    </p>
  </div>
  <div class="relative rounded overflow-hidden">
    <img src="https://source.unsplash.com/400x300/?table-top-planters" alt="Table Top Planters" class="w-full">
    <p
      class="cursor-pointer absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center text-2xl text-center text-white font-roboto font-medium group-hover:bg-opacity-60 transition">
      Table Top Planters
    </p>
  </div>
  <div class="relative rounded overflow-hidden">
    <img src="https://source.unsplash.com/400x300/?wall-mounted-stands" alt="Wall Mounted Stands" class="w-full">
    <p
      class="cursor-pointer absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center text-2xl text-center text-white font-roboto font-medium group-hover:bg-opacity-60 transition">
      Wall Mounted Stands
    </p>
  </div>
  <div class="relative rounded overflow-hidden">
    <img src="https://source.unsplash.com/400x300/?jute-plant-pots" alt="Jute Plant Pots" class="w-full">
    <p
      class="cursor-pointer absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center text-2xl text-center text-white font-roboto font-medium group-hover:bg-opacity-60 transition">
      Jute Plant Pots
    </p>
  </div>
  <div class="relative rounded overflow-hidden">
    <img src="https://source.unsplash.com/400x300/?bird-feeders" alt="Bird Feeders" class="w-full">
    <p
      class="cursor-pointer absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center text-2xl text-center text-white font-roboto font-medium group-hover:bg-opacity-60 transition">
      Bird Feeders
    </p>
  </div>
  <div class="relative rounded overflow-hidden">
    <img src="https://source.unsplash.com/400x300/?hanging-birds" alt="Hanging Birds" class="w-full">
    <p
      class="cursor-pointer absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center text-2xl text-center text-white font-roboto font-medium group-hover-bg-opacity-60 transition">
      Hanging Birds
    </p>
  </div>
  <div class="relative rounded overflow-hidden">
    <img src="https://source.unsplash.com/400x300/?garden-sticks" alt="Garden Sticks" class="w-full">
    <p
      class="cursor-pointer absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center text-2xl text-center text-white font-roboto font-medium group-hover:bg-opacity-60 transition">
      Garden Sticks
    </p>
  </div>
  <div class="relative rounded overflow-hidden">
    <img src="https://source.unsplash.com/400x300/?garden-tray-miniatures" alt="Garden Tray Miniatures" class="w-full">
    <p
      class="cursor-pointer absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center text-2xl text-center text-white font-roboto font-medium group-hover-bg-opacity-60 transition">
      Garden Tray Miniatures
    </p>
  </div>
  <div class="relative rounded overflow-hidden">
    <img src="https://source.unsplash.com/400x300/?garden-tool-set" alt="Garden Tool Set" class="w-full">
    <p
      class="cursor-pointer absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center text-2xl text-center text-white font-roboto font-medium group-hover-bg-opacity-60 transition">
      Garden Tool Set
    </p>
  </div>
  <div class="relative rounded overflow-hidden">
    <img src="https://source.unsplash.com/400x300/?candle-stand" alt="Candle Stand" class="w-full">
    <p
      class="cursor-pointer absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center text-2xl text-center text-white font-roboto font-medium group-hover-bg-opacity-60 transition">
      Candle Stand
    </p>
  </div>
  <div class="relative rounded overflow-hidden">
    <img src="https://source.unsplash.com/400x300/?lanterns" alt="Lanterns" class="w-full">
    <p
      class="cursor-pointer absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center text-2xl text-center text-white font-roboto font-medium group-hover-bg-opacity-60 transition">
      Lanterns
    </p>
  </div>
  <div class="relative rounded overflow-hidden">
    <img src="https://source.unsplash.com/400x300/?chimes" alt="Chimes" class="w-full">
    <p
      class="cursor-pointer absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center text-2xl text-center text-white font-roboto font-medium group-hover-bg-opacity-60 transition">
      Chimes
    </p>
  </div>
  <div class="relative rounded overflow-hidden">
    <img src="https://source.unsplash.com/400x300/?cage" alt="Cage" class="w-full">
    <p
      class="cursor-pointer absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center text-2xl text-center text-white font-roboto font-medium group-hover-bg-opacity-60 transition">
      Cage
    </p>
  </div>
  <div class="relative rounded overflow-hidden">
    <img src="https://source.unsplash.com/400x300/?bird-house-hanging" alt="Bird House Hanging" class="w-full">
    <p
      class="cursor-pointer absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center text-2xl text-center text-white font-roboto font-medium group-hover-bg-opacity-60 transition">
      Bird House Hanging
    </p>
  </div>
</div>

Related Examples

Tailwind image gallery
Responsive grid with evenly spaced image cards. Each card has a title label at the bottom, and there's a subtle hover effect for interactive engagement.

Alok

3 years ago

62.3k
Images grid
Responsive image grid with tailwindcss.

Sienna

3 years ago

20k
image gallery
image gallery [lightbox]

Anonymous

3 years ago

20.7k
Image gallery using grid
basic image gallery that displays images in a responsive grid, with an overlay and a "View" button that appears on hover. You can further customize and enhance it to fit your design and functionality requirements.

Prajwal Hallale

3 years ago

10.7k
Masonry Grid
Auto-adjusting masonry grid

Simon Scheffer

3 years ago

32.8k
Verticle card grid
Best suited for news websites

Mr Robot

3 years ago

14.3k
Tailwind product gallery

JaxStone

3 years ago

27.8k
Responsive products grid
Responsive product card grid using tailwind CSS.

Arya

3 years ago

46.1k
Responsive Card Grid with images

TailwindFlex

4 years ago

20.9k
Responsive flexbox layout using Tailwind CSS

Leif99

3 years ago

13.6k
Customer testimonies grid

Sameer Sultana

3 years ago

21.3k
Products cards w/ hover effect
Example of product card grid with product image, pricing and a hover effect FORKED FROM: https://tailwindflex.com/noob_dev/products-card-grid

threehymns

2 years ago

20.1k
Company icons grid

Piet Vriend

3 years ago

10.9k
Post Responsive Grid
Laravel News post grid

Mr Robot

4 years ago

13.2k
Posts / Articles card grid
Present a collection of articles or blog posts in a grid format with their respective featured images

Prajwal Hallale

2 years ago

5.5k
Responsive card grid
Responsive card grid for posts section

Mr Robot

3 years ago

12k
Bento grids

Maxim

2 years ago

22.8k