Responsive grid view in TailwindCSS using NextJS

Cover Image for Responsive grid view in TailwindCSS using NextJS
toofancoder
toofancoder

If you want to head over to the code on Github, there you go.

Using version as below

  • NextJS - 15.0.1
  • ReactJS - 19.0.0
  • Tailwind CSS - ^3.4.1

Thought I will write a easy to use/copy-paste a gist/sample code to show a grid in Tailwind CSS in NextJS

Show me the code

Here is a list of some random images on the internet.

export const SAMPLE_IMAGES = [
  "https://images.unsplash.com/photo-1729432535925-99da7bd2e2be?q=80&w=2450&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
  "https://images.unsplash.com/photo-1729494130269-c5610ddbd300?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
  "https://plus.unsplash.com/premium_photo-1663839014860-382ee7152d43?q=80&w=2628&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
];

Using above sample images in the below code.

<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-4 gap-6">
    {SAMPLE_IMAGES.map((image) => {
      return (
        <div class="overflow-hidden rounded-lg shadow-lg">
          <img
            src={image}
            alt="Image 1"
            class="w-full h-60 object-cover hover:scale-105 transition-transform duration-300"
          />
        </div>
      );
    })}
  </div>