Product List in React

.product-container{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.product-block{
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 10px;
  width: 300px;
  font-size: 14px;
}
.product-block img{
  width: 100%;
}
.product-name{
  font-weight: bold;
  font-size: 16px;
}
.product-price{
  color: #ff8e8e;
    font-size: 26px;
}
.product-button{
      background-color: #ff8e8e;
    color: white;
    font-size: 20px;
    margin-top: 10px;
    padding: 6px 0 10px;
}

let products = [
    {
        id: 1,
        name: 'Apple Iphone 15 (Black, 128 GB)',
        price: 'Rs. 39,999',
        image: 'https://rukminim2.flixcart.com/image/312/312/xif0q/mobile/h/d/9/-original-imagtc2qzgnnuhxh.jpeg?q=70',
        detail: '128GB Rom, 48MB Camera'
    },
    {
        id: 2,
        name: 'Apple Iphone 16e (Black, 256 GB)',
        price: 'Rs. 64,900',
        image: 'https://rukminim2.flixcart.com/image/312/312/xif0q/mobile/1/p/c/-original-imah9khhnfvstqka.jpeg?q=70',
        detail: '128GB Rom, 48MB Camera'
    },
    {
        id: 3,
        name: 'Apple Iphone 13 (Starlight, 128 GB)',
        price: 'Rs. 44,999',
        image: 'https://rukminim2.flixcart.com/image/312/312/ktketu80/mobile/6/n/d/iphone-13-mlpg3hn-a-apple-original-imag6vpyghayhhrh.jpeg?q=70',
        detail: '128GB Rom, 48MB Camera'
    }
]
function productList(){
    return(
        <>
            <div className="product-container">
                {products.map((product) => (
                    <div key={product.id} className="product-block">
                        <img src={product.image} alt={product.id} />
                        <div className="product-name">{product.name}</div>
                        <div className="product-price">{product.price}</div>
                        <div>{product.detail}</div>
                        <div className="product-button">Buy Now</div>
                    </div>  
                ))}
            </div>
        </>
    )
}
export default productList