Is it possible to resize image of child element without affecting parent element in React using Tailwind CSS

I have a Products page that renders all my SingleProduct components.

This is working ok but I would like to resize the image on my SingleProduct page but when i do it also resizes all my products on my Products page.

Is it possible to apply different css styles to these components considering how I am rendering them?

const Products = () => {
    const products = data;

    return (
        <div className='pt-12 grid gap-4 md:grid-cols-2 lg:grid-cols-3 '>
            {products.map((prod) => {
                return (
                    <Link to={`/product/${prod.id}`}>
                        <SingleProduct product={prod}></SingleProduct>
                    </Link>
                )
            })}
            <Link to='/home'></Link>
        </div>


    )
}

export default Products

const SingleProduct = (props) => {
    const [image, setImage] = useState()
    const [title, setTitle] = useState()
    const [price, setPrice] = useState()
    useEffect(() => {
        setImage(props.product.image)
        setTitle(props.product.title)
        setPrice(props.product.price)
    }, [])

    return (
        <div>
            <div className="text-center font-bold text-lg ">
                <h2 className='capitalize tracking-wider'>{title}</h2>
            </div>

            <figure className='px-8 pt-8'>
                <img style={{ width: '70%' }}
                    src={image}
                    alt='Elf'
                    className='rounded-xl w-full object-cover'
                />
            <div className='card-body items-center text-center'>
                <h2 className='card-title capitalize tracking-wider'>Price: {price}</h2>
            </div>
        </div>
    )
}

export default SingleProduct

import SingleProduct from "./SingleProduct";
import { useParams } from "react-router-dom";
import { useState, useEffect } from "react";
import data from "../data";

const SingleProductPage = () => {
  let { id } = useParams();
  const [product, setProduct] = useState();

  useEffect(() => {
    id && setProduct(data.find((prod) => prod.id == id))
  }, [id]) // runs whenever the id changed and updates the product

  return product ? <SingleProduct product={product} /> : null
}

export default SingleProductPage;

import { createBrowserRouter, RouterProvider } from 'react-router-dom'
import { HomeLayout, Landing, Products, SingleProduct } from './pages'
import './App.css'

import SingleProductPage from './pages/SingleProductPage'


const router = createBrowserRouter([
  {
    path: '/',
    element: <HomeLayout></HomeLayout>,
    children: [
      {
        index: true,
        element: <Landing></Landing>,
      },
      {
        path: 'product',
        element: <Products></Products>,
      },
      {
        path: 'product/:id',
        element: <SingleProductPage></SingleProductPage>,
      },
    ]
  },

])

function App() {

  return (
    <RouterProvider router={router}></RouterProvider>
  )
}

export default App

You can scope CSS rules by placing them into containers or div elements and giving them different id or class attributes and setting your CSS rules accordingly.

Example:

CSS

.product-image {
  width: 70%;
}

#products-page {
  .product-image {
    width: 100px;
  }
}

#product-page {
  .product-image {
    display: block;
    margin: auto;
    width: 50%;
  }
}

const Products = () => {
  return (
    <div
      id="products-page" // <-- container id
      className="pt-12 grid gap-4 md:grid-cols-2 lg:grid-cols-3 "
    >
      {products.map((prod) => {
        return (
          <Link key={prod.id} to={`/product/${prod.id}`}>
            <SingleProduct product={prod} />
          </Link>
        );
      })}
      <Link to="/home"></Link>
    </div>
  );
};

const SingleProductPage = () => {
  const { id } = useParams();
  const product = products.find((prod) => prod.id === id);

  return (
    <div
      id="product-page" // <-- container id
    >
      {product && <SingleProduct product={product} />}
    </div>
  );
};

const SingleProduct = ({ product }) => {
  return (
    <div>
      <div className="text-center font-bold text-lg ">
        <h2 className="capitalize tracking-wider">{product.title}</h2>
      </div>

      <figure className="px-8 pt-8">
        <img
          src={product.image}
          alt="Elf"
          className="product-image" // <-- image class
        />
      </figure>
      <div className="card-body items-center text-center">
        <h2 className="card-title capitalize tracking-wider">
          Price: {product.price}
        </h2>
      </div>
    </div>
  );
};

Container	Layout
"products-page"
"product-page"