Product Grid - Copy this React, Tailwind Component to your project

<div className="min h screen flex flex col"> <div className="flex 1"> <div> <div className="mx auto lg:ml 10 lg:mr 10"> <div className="grid grid cols 1 sm:grid cols 2 md:grid cols 3 lg:grid cols 3 gap 6"> {products.map((product) => ( <div key={product.subgroupId} className="bg white rounded md shadow sm border transition all duration 200 ease in out transform hover:scale 105 focus within:ring 2 focus within:ring indigo 500 overflow hidden" onClick={() => handleClickProductDetials(product)} > <div> <img src={`${product?.mainPhoto}`} alt={product?.subgroupName} className="w full h 72 object cover rounded md mb 2" /> </div> <div> <p className="font bold">{product.productName || "N/A"}</p> </div> </div> ))} </div> </div> </div> </div> </div>create a lookking attracitbve and modern ui and repsonsive