Create a dynamic image gallery using Tailwind CSS in React

A dynamic image gallery allows you to display images in a visually appealing manner, with options for customization and interactivity. By using Tailwind CSS in your React application, you can easily create a responsive Image gallery that adapts to different screen sizes and devices, ensuring a seamless user experience.

Demo Application

Output - Create a dynamic image gallery using Tailwind CSS in React - Clue Mediator

Create a dynamic image gallery using Tailwind CSS in React

1. Project structure
2. Package dependencies
3. Implementation
4. Output

1. Project structure

• dynamic-image-gallery-tailwind-react

  • node_modules

  • public

    • index.html

  • src

    • App.js
    • index.css
    • index.js

  • package-lock.json

  • package.json

  • README.md

2. Package dependencies

Run the following command to install tailwindcss npm package.

npm i tailwindcss

You will find the version of the following packages in React application.

react

^18.2.0

tailwindcss

^3.2.7

Additionally, if you need help setting up Tailwind CSS in your React project, you can refer to the following article to get started. It provides step-by-step instructions on how to install and configure Tailwind CSS in a React application, so you can start building dynamic and SEO-friendly image galleries in no time.

Getting started with Tailwind CSS in React

3. Implementation

Refer to the following files for implementation.

App.js

import React from 'react';

function App() {
  const images = [
    "https://tecdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(1).webp",
    "https://tecdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(2).webp",
    "https://tecdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(3).webp",
    "https://tecdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(4).webp",
    "https://tecdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(5).webp",
    "https://tecdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(6).webp",
    "https://tecdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(7).webp",
    "https://tecdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(8).webp",
    "https://tecdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(9).webp",
    "https://tecdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(10).webp",
    "https://tecdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(11).webp",
    "https://tecdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(12).webp",
    "https://tecdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(13).webp",
    "https://tecdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(14).webp",
    "https://tecdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(15).webp",
  ]
  return (
    <div class="container mx-auto px-5 py-2 lg:px-32 lg:pt-24">
      <div class="text-xl mb-5 font-semibold">Create a dynamic image gallery using Tailwind CSS in React - <a href="https://www.cluemediator.com" target="_blank" class="text-blue-500 hover:underline" rel="noopener">Clue Mediator</a></div>
      <div class="-m-1 flex flex-wrap md:-m-2">
        {images.map((image, index) => (
          <div key={index} class="flex w-full sm:w-1/2 md:w-1/3 lg:w-1/4 p-1 md:p-2">
            <img class="block mx-auto h-full object-cover object-center rounded-lg shadow-md" src={image}>
          </div>
        ))}
      </div>
    </div>
  );
}

export default App;

First, we define an array of image URLs in the images variable. These URLs represent the images that will be displayed in the gallery. You can replace these URLs with your own images or fetch them from an API.

Next, we create a functional component App using React. Inside the component, we use the container, mx-auto, px-5, py-2, lg:px-32, and lg:pt-24 classes from Tailwind CSS to define the layout and spacing of the gallery container. The container class centers the content and sets the maximum width to a default value, which can be overridden at different breakpoints using responsive classes such as lg:px-32.

Inside the gallery container, we have a text-xl class to set the font size, mb-5 a class for margin-bottom, and font-semibold class for font weight of the gallery title. We also include a hyperlink to the Clue Mediator website with a blue color and underline on hover using Tailwind CSS classes text-blue-500 and hover:underline. You can update the link with your own website or remove it if not needed.

The image gallery is created using a flexbox layout with the flex and flex-wrap classes. We use the md:-m-2 class to add a negative margin on medium screens and larger ones, which helps with spacing between gallery items. For each image in the images array, we map over them and create an div element with the flex, w-full, sm:w-1/2, md:w-1/3, and lg:w-1/4 classes to define the width of each gallery item at different breakpoints. We also add padding to each gallery item using the p-1 and md:p-2 classes for small and medium screens, respectively.

Inside each gallery item, we have an img element with the block, mx-auto, h-full, object-cover, object-center, rounded-lg, and shadow-md classes. These classes help with centering the image, setting its height to full, applying a rounded border, and adding a shadow effect.

Overall, this code demonstrates how to create a dynamic image gallery using Tailwind CSS in a React application. You can customize the layout, spacing, and styles of the gallery by modifying the Tailwind CSS classes according to your requirements.

4. Output

Run your application and check the output in the browser.

That's it for today.
Thank you for reading. Happy Coding..!!

Demo & Source Code

GitHub Repository