React Tailwind CSS Responsive Gallery Example

In this tutorial, we will create responsive gallery in react js with tailwind css. We will see simple nested gallery and 3, 4 column gallery examples with Tailwind CSS & React.

Tool Use

React JS

Tailwind CSS 3.v

First you need to setup react project with tailwind css. You can install manually or you read below blog.

How to install Tailwind CSS in React

Install & Setup Vite + React + Typescript + Tailwind CSS 3

Example 1

React js tailwind css responsive galley using grid.

import React from "react";

export default function Gallery() {
    return (
        <div className="grid grid-cols-1 gap-4 lg:grid-cols-4 sm:grid-cols-2">
            <img
                className="object-cover w-full border"
                src="https://cdn.pixabay.com/photo/2018/05/08/14/34/lightweight-transporter-3383177__340.png"
            />
            <img
                className="object-cover w-full border"
                src="https://cdn.pixabay.com/photo/2018/05/08/14/34/lightweight-transporter-3383177__340.png"
            />
            <img
                className="object-cover w-full border"
                src="https://cdn.pixabay.com/photo/2018/05/08/14/34/lightweight-transporter-3383177__340.png"
            />
            <img
                className="object-cover w-full border"
                src="https://cdn.pixabay.com/photo/2018/05/08/14/34/lightweight-transporter-3383177__340.png"
            />
        </div>
    );
}

React js tailwind css responsive galley using grid.

Example 2

3 cols gallery in react js with tailwind css.

import React from "react";

export default function Gallery() {
    return (
        <div className="grid grid-cols-1 gap-4 lg:grid-cols-3 sm:grid-cols-2">
            <img
                className="object-cover w-full border"
                src="https://cdn.pixabay.com/photo/2018/05/08/14/34/lightweight-transporter-3383177__340.png"
            />
            <img
                className="object-cover w-full border"
                src="https://cdn.pixabay.com/photo/2018/05/08/14/34/lightweight-transporter-3383177__340.png"
            />
            <img
                className="object-cover w-full border"
                src="https://cdn.pixabay.com/photo/2018/05/08/14/34/lightweight-transporter-3383177__340.png"
            />
            <img
                className="object-cover w-full border"
                src="https://cdn.pixabay.com/photo/2018/05/08/14/34/lightweight-transporter-3383177__340.png"
            />
            <img
                className="object-cover w-full border"
                src="https://cdn.pixabay.com/photo/2018/05/08/14/34/lightweight-transporter-3383177__340.png"
            />
            <img
                className="object-cover w-full border"
                src="https://cdn.pixabay.com/photo/2018/05/08/14/34/lightweight-transporter-3383177__340.png"
            />
        </div>
    );
}

Example 3

Simple nested gallery in react with tailwind css

import React from "react";

export default function Gallery() {
    return (
        <div className="container grid grid-cols-2 gap-4 lg:grid-cols-4">
            <img
                src="https://cdn.pixabay.com/photo/2018/06/23/21/00/balance-3493487__340.jpg"
                className="w-full h-full col-span-2 row-span-2 rounded shadow-sm lg:col-start-3 lg:row-start-1"
            />
            <img
                className="w-full h-full"
                src="https://cdn.pixabay.com/photo/2017/11/09/10/57/light-weight-aggregates-2933073__340.jpg"
            />
            <img
                className="w-full h-full"
                src="https://cdn.pixabay.com/photo/2017/11/09/10/57/light-weight-aggregates-2933073__340.jpg"
            />
            <img
                className="w-full h-full"
                src="https://cdn.pixabay.com/photo/2017/11/09/10/57/light-weight-aggregates-2933073__340.jpg"
            />
            <img
                className="w-full h-full"
                src="https://cdn.pixabay.com/photo/2017/11/09/10/57/light-weight-aggregates-2933073__340.jpg"
            />
        </div>
    );
}

react tailwind nested gallery app

Read Also

React Tailwind CSS Accordion (FAQ) Example

React Tailwind CSS Tabs Examples

How to use Tailwind CSS 3 with Headless UI In React

Toggle Switch in React JS with Tailwind CSS Example

Create Reusable Button Component with React & Tailwind CSS

React Tailwind CSS Search Bar Example

React Tailwind CSS Sidebar Example

React JS Login Form with Tailwind CSS Example

React Responsive Navbar Menu With Tailwind CSS Example

How to install Tailwind CSS in React

React Tailwind CSS Dialog (Modal) Example

React Tailwind Registration Form Example

React Tailwind CSS Table Example

React Tailwind CSS Responsive Gallery Example