In today’s digital age, creating visually appealing and interactive product grids is a crucial aspect of web development, especially for e-commerce websites. In this tutorial, we will explore how to build a product grid using React, Tailwind CSS, and React Icons.

Prerequisites

Before we dive into the code, make sure you have the following prerequisites installed:

Node.js and npm (Node Package Manager)
Create React App (CRA) or your preferred React setup

Setting Up Your Project

To get started, create a new React application and install the necessary packages:

npx create-react-app product-grid-app
cd product-grid-app
npm install tailwindcss react-icons

Now, let’s integrate Tailwind CSS into your project. Open the src/index.css file and add the following:

/* src/index.css */
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

Next, create a Tailwind CSS configuration file:

npx tailwindcss init -p

In your tailwind.config.js file, enable JIT mode for faster development:

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Now that your project is set up, let’s create the components for your product grid.

Creating the Product Component

Inside the src/components/home/Products directory, create a new file named Product.js and add the following code:

// src/components/home/Products/Product.js
import React from "react";
import { BsSuitHeartFill } from "react-icons/bs";
import { GiReturnArrow } from "react-icons/gi";
import { FaShoppingCart } from "react-icons/fa";
import { MdOutlineLabelImportant } from "react-icons/md";

const Product = (props) => {
  return (
    <div className="w-full relative group">
      <div className="max-w-80 max-h-80 relative overflow-y-hidden ">
        <div>
          <img className="w-full h-full" src={props.img} />
        </div>
        <div className="w-full h-32 absolute bg-white -bottom-[130px] group-hover:bottom-0 duration-700">
          <ul className="w-full h-full flex flex-col items-end justify-center gap-2 font-titleFont px-2 border-l border-r">
            <li className="text-[#767676] hover:text-primeColor text-sm font-normal border-b-[1px] border-b-gray-200 hover:border-b-primeColor flex items-center justify-end gap-2 hover:cursor-pointer pb-1 duration-300 w-full">
              Compare
              <span>
                <GiReturnArrow />
              </span>
            </li>
            <li className="text-[#767676] hover:text-primeColor text-sm font-normal border-b-[1px] border-b-gray-200 hover:border-b-primeColor flex items-center justify-end gap-2 hover:cursor-pointer pb-1 duration-300 w-full">
              Add to Cart
              <span>
                <FaShoppingCart />
              </span>
            </li>
            <li className="text-[#767676] hover:text-primeColor text-sm font-normal border-b-[1px] border-b-gray-200 hover:border-b-primeColor flex items-center justify-end gap-2 hover:cursor-pointer pb-1 duration-300 w-full">
              View Details
              <span className="text-lg">
                <MdOutlineLabelImportant />
              </span>
            </li>
            <li className="text-[#767676] hover:text-primeColor text-sm font-normal border-b-[1px] border-b-gray-200 hover:border-b-primeColor flex items-center justify-end gap-2 hover:cursor-pointer pb-1 duration-300 w-full">
              Add to Wish List
              <span>
                <BsSuitHeartFill />
              </span>
            </li>
          </ul>
        </div>
      </div>
      <div className="max-w-80 py-6 flex flex-col gap-1 border-[1px] border-t-0 px-4">
        <div className="flex items-center justify-between font-titleFont">
          <h2 className="text-lg text-primeColor font-bold">
            {props.productName}
          </h2>
          <p className="text-[#767676] text-[14px]">${props.price}</p>
        </div>
        <div>
          <p className="text-[#767676] text-[14px]">{props.color}</p>
        </div>
      </div>
    </div>
  );
};

export default Product;

This Product component represents an individual product card with product image, actions, and details.

Creating the Home Component

Now, let’s create the Home component that will display a grid of products. In your src directory, create a file named Home.js and add the following code:

import React from "react";
import Product from "../../components/home/Products/Product";

const products = [
  {
    _id: "100001",
    img: "https://images.pexels.com/photos/258244/pexels-photo-258244.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    productName: "Round Table Clock",
    price: "44.00",
    color: "Black",
  },
  {
    _id: "100002",
    img: "https://images.pexels.com/photos/258244/pexels-photo-258244.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    productName: "Round Table Clock",
    price: "44.00",
    color: "Black",
  },
  {
    _id: "100003",
    img: "https://images.pexels.com/photos/258244/pexels-photo-258244.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    productName: "Round Table Clock",
    price: "44.00",
    color: "Black",
  },
  {
    _id: "100004",
    img: "https://images.pexels.com/photos/258244/pexels-photo-258244.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    productName: "Round Table Clock",
    price: "44.00",
    color: "Black",
  },
  {
    _id: "100005",
    img: "https://images.pexels.com/photos/258244/pexels-photo-258244.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    productName: "Round Table Clock",
    price: "44.00",
    color: "Black",
  },
];

const App = () => {
  return (
    <div className="container mx-auto my-96">
      <div className="grid md:grid-cols-2 sm:grid-cols-1 lg:grid-cols-4 gap-4">
        {products.map((product, index) => (
          <Product
            key={index}
            _id={product._id}
            img={product.img}
            productName={product.productName}
            price={product.price}
            color={product.color}
          />
        ))}
      </div>
    </div>
  );
};

export default App;

The Home component renders a grid of products by mapping over the products array and passing the product data as props to the Product component.

Conclusion

With this setup, you can easily create a visually appealing product grid in your React application using Tailwind CSS for styling and React Icons for adding interactive icons. Feel free to expand upon this code by adding more products and customizing the styles to match your project’s requirements. Happy coding!

ryad's Blog