Product Listing Page - Copy this React, Tailwind Component to your project

Upgrade cssreturn ( <div className="w full"> <div className="h [80px] flex pt 8 justify center items center bg gray 100 shadow sm"> <div className="lg:w main w screen px 4 lg:px 0 "> <h3 className="font semibold uppercase">{"Sản phẩm" || category}</h3> <Breadcrumb category={category || "Sản phẩm"} /> </div> </div> <div className="lg:w main border p 4 flex lg:pr 4 pr 8 flex col md:flex row gap 4 md:justify between mt 8 m auto rounded lg shadow md"> <div className="w 4/5 flex auto flex flex col gap 3"> <span className="font semibold text base text gray 700"> Lọc theo giá tiền </span> <div className="flex items center gap 4"> <SearchItem name="price" label="Giá tiền" activeClick={activeClick} changeActiveFitler={changeActiveFitler} type="input" /> <SearchItem name="color" label="Màu sắc" activeClick={activeClick} changeActiveFitler={changeActiveFitler} /> </div> </div> <div className="w main m auto mt 4 flex items center gap 2"> <input type="text" placeholder="Tìm kiếm sản phẩm..." value={searchQuery} onChange={handleSearchChange} className="w full border border gray 300 p 3 rounded lg focus:border main focus:ring 2 focus:ring main transition all" /> </div> <div className="w 1/5 flex flex col gap 3"> <span className="font semibold text s">Sắp xếp</span> <div className="w full"> <InputSelect changeValue={changeValue} value={sort} options={sorts} /> </div> </div> </div> <div className="mt 8 w main m auto grid lg:grid cols 4 md:grid cols 3 grid cols 1 gap 4"> {products?.products?.length > 0 ? ( products.products.map((el) => ( <Product key={el._id} pid={el._id} productData={el} normal={true} /> )) ) : ( <p className="text center col span 4 text gray 500"> Không tìm thấy sản phẩm phù hợp. </p> )} </div> <div className="w main m auto my 4 flex justify end"> <Pagination totalCount={products?.counts} /> </div> </div> );