Styled Card - Copy this React, Mui Component to your project
<div className="w-[1084.57px] h-[2017px] relative bg-white overflow-hidden"> <div className="px-[54.23px] pt-[18.08px] pb-[24.10px] left-0 top-0 absolute bg-neutral-50 flex-col justify-start items-start gap-[7.53px] inline-flex"> <div className="justify-start items-end gap-[173.23px] inline-flex"> <div className="w-32 h-[22.60px] text-gray-700 text-lg font-normal font-['Euclid Circular A'] tracking-tight">Laura’s Closet</div> <div className="w-[210.89px] h-[18.08px] relative"> <div className="w-[118.25px] h-[15.06px] left-[24.10px] top-[-0px] absolute text-gray-400 text-xs font-normal font-['Euclid Circular A'] tracking-tight">Search for an Item...</div> <div className="w-[12.05px] h-[12.05px] left-0 top-[0.75px] absolute overflow-hidden" /> </div> <div className="justify-start items-center gap-[30.13px] flex"> <div className="w-[31.63px] h-[15.06px] text-gray-500 text-xs font-normal font-['Euclid Circular A'] tracking-tight">Store</div> <div className="w-[50.46px] h-[15.06px] text-gray-500 text-xs font-normal font-['Euclid Circular A'] tracking-tight">Account</div> <div className="w-[52.72px] h-[15.06px] text-gray-500 text-xs font-normal font-['Euclid Circular A'] tracking-tight">Wish List</div> <div className="justify-center items-center gap-1.5 flex"> <div className="w-[41.42px] h-[15.06px] text-gray-800 text-xs font-semibold font-['Euclid Circular A'] tracking-tight">Basket</div> <div className="w-[18.08px] h-[18.08px] relative overflow-hidden"> <div className="w-[18.08px] h-[15.89px] left-0 top-[1.09px] absolute"> </div> </div> </div> </div> </div> </div> <div className="h-[48.20px] px-[54.23px] py-[15.06px] left-0 top-[64.77px] absolute bg-white flex-col justify-start items-start gap-[7.53px] inline-flex"> <div className="justify-start items-center gap-[27.11px] inline-flex"> <div className="justify-start items-center gap-1.5 flex"> <div className="w-[67.03px] h-[13.56px] text-gray-700 text-[10.54px] font-semibold font-['Euclid Circular A'] tracking-tight">New Arrivals</div> <div className="px-1.5 py-[3.01px] bg-[#eb5757] rounded-sm justify-start items-center gap-[7.53px] flex"> <div className="w-[33.14px] h-[12.05px] text-white text-[9.79px] font-normal font-['Euclid Circular A'] tracking-tight">#Fresh</div> </div> </div> <div className="w-[41.42px] h-[13.56px] text-gray-700 text-[10.54px] font-semibold font-['Euclid Circular A'] tracking-tight">Dresses</div> <div className="w-[24.10px] h-[13.56px] text-gray-700 text-[10.54px] font-semibold font-['Euclid Circular A'] tracking-tight">Tops</div> <div className="w-[41.42px] h-[13.56px] text-gray-700 text-[10.54px] font-semibold font-['Euclid Circular A'] tracking-tight">Jackets</div> <div className="w-[124.27px] h-[13.56px] text-gray-700 text-[10.54px] font-semibold font-['Euclid Circular A'] tracking-tight">Lingerie & Lounge Wear</div> <div className="w-[63.27px] h-[13.56px] text-gray-700 text-[10.54px] font-semibold font-['Euclid Circular A'] tracking-tight">Beach Wear</div> <div className="w-[34.65px] h-[13.56px] text-gray-700 text-[10.54px] font-semibold font-['Euclid Circular A'] tracking-tight">Blouse</div> <div className="w-[33.89px] h-[13.56px] text-gray-700 text-[10.54px] font-semibold font-['Euclid Circular A'] tracking-tight">Denim</div> <div className="w-[42.18px] h-[13.56px] text-gray-700 text-[10.54px] font-semibold font-['Euclid Circular A'] tracking-tight">Vintage</div> <div className="w-[31.63px] h-[13.56px] text-gray-700 text-[10.54px] font-semibold font-['Euclid Circular A'] tracking-tight">Shoes</div> <div className="w-[42.18px] h-[13.56px] text-gray-700 text-[10.54px] font-semibold font-['Euclid Circular A'] tracking-tight">Sandals</div> <div className="w-[26.36px] h-[13.56px] text-gray-700 text-[10.54px] font-semibold font-['Euclid Circular A'] tracking-tight">Bags</div> <div className="w-[49.71px] h-[13.56px] text-gray-700 text-[10.54px] font-semibold font-['Euclid Circular A'] tracking-tight">Jewelries</div> </div> </div> <div className="w-[254.57px] h-[1139.55px] left-[54.23px] top-[326.12px] absolute flex-col justify-center items-center inline-flex"> <div className="w-[254.57px] h-[1139.55px] bg-gray-50" /> </div> <div className="w-[976.11px] h-[89.63px] left-[54.23px] top-[143.10px] absolute bg-gray-900" /> <div className="h-[381.86px] px-[54.23px] py-[46.70px] left-0 top-[1635.14px] absolute bg-gray-50 flex-col justify-start items-start gap-[7.53px] inline-flex"> <div className="flex-col justify-start items-start gap-[46.70px] flex"> <div className="justify-start items-start gap-[121.26px] inline-flex"> <div className="justify-start items-start gap-[66.28px] flex"> <div className="flex-col justify-start items-start gap-[12.05px] inline-flex"> <div className="w-[88.87px] h-[13.56px] text-gray-800 text-[10.54px] font-semibold font-['Euclid Circular A'] uppercase tracking-wide">Company Info</div> <div className="flex-col justify-start items-start gap-1.5 flex"> <div className="w-[115.99px] h-[13.56px] text-gray-500 text-[10.54px] font-normal font-['Euclid Circular A'] tracking-wide">About Laura’s Closet </div> <div className="w-[113.73px] h-[13.56px] text-gray-500 text-[10.54px] font-normal font-['Euclid Circular A'] tracking-wide">Social Responsibility</div> <div className="w-[43.68px] h-[13.56px] text-gray-500 text-[10.54px] font-normal font-['Euclid Circular A'] tracking-wide">Affiliate</div> <div className="w-[87.37px] h-[13.56px] text-gray-500 text-[10.54px] font-normal font-['Euclid Circular A'] tracking-wide">Fashion Blogger</div> </div> </div> <div className="flex-col justify-start items-start gap-[12.05px] inline-flex"> <div className="w-[93.39px] h-[13.56px] text-gray-800 text-[10.54px] font-semibold font-['Euclid Circular A'] uppercase tracking-wide">HElp & Support</div> <div className="flex-col justify-start items-start gap-1.5 flex"> <div className="w-[72.30px] h-[13.56px] text-gray-500 text-[10.54px] font-normal font-['Euclid Circular A'] tracking-wide">Shipping Info</div> <div className="w-[42.18px] h-[13.56px] text-gray-500 text-[10.54px] font-normal font-['Euclid Circular A'] tracking-wide">Returns</div> <div className="w-[73.06px] h-[13.56px] text-gray-500 text-[10.54px] font-normal font-['Euclid Circular A'] tracking-wide">How to Order</div> <div className="w-[70.80px] h-[13.56px] text-gray-500 text-[10.54px] font-normal font-['Euclid Circular A'] tracking-wide">How to Track</div> <div className="w-[57.24px] h-[13.56px] text-gray-500 text-[10.54px] font-normal font-['Euclid Circular A'] tracking-wide">Size Chart</div> </div> </div> <div className="flex-col justify-start items-start gap-[12.05px] inline-flex"> <div className="w-[95.65px] h-[13.56px] text-gray-800 text-[10.54px] font-semibold font-['Euclid Circular A'] uppercase tracking-wide">customer care</div> <div className="flex-col justify-start items-start gap-1.5 flex"> <div className="w-[61.76px] h-[13.56px] text-gray-500 text-[10.54px] font-normal font-['Euclid Circular A'] tracking-wide">Contact Us</div> <div className="w-[48.20px] h-[13.56px] text-gray-500 text-[10.54px] font-normal font-['Euclid Circular A'] tracking-wide">Payment</div> <div className="w-16 h-[13.56px] text-gray-500 text-[10.54px] font-normal font-['Euclid Circular A'] tracking-wide">Bonus Point</div> <div className="w-[42.18px] h-[13.56px] text-gray-500 text-[10.54px] font-normal font-['Euclid Circular A'] tracking-wide">Notices</div> </div> </div> </div> <div className="flex-col justify-start items-start gap-[30.88px] inline-flex"> <div className="justify-start items-start gap-[182.27px] inline-flex"> <div className="flex-col justify-start items-start gap-[12.05px] inline-flex"> <div className="w-[49.71px] h-[13.56px] text-gray-800 text-[10.54px] font-semibold font-['Euclid Circular A'] uppercase tracking-wide">Socials</div> <div className="justify-start items-start gap-[12.05px] inline-flex"> <div className="w-[24.10px] h-[24.10px] relative overflow-hidden" /> <div className="w-[24.10px] h-[24.10px] relative overflow-hidden" /> <div className="w-[24.10px] h-[24.10px] relative overflow-hidden" /> <div className="w-[24.10px] h-[24.10px] relative overflow-hidden" /> <div className="w-[24.10px] h-[24.10px] relative overflow-hidden" /> </div> </div> <div className="flex-col justify-start items-start gap-[12.05px] inline-flex"> <div className="w-[66.28px] h-[13.56px] text-gray-800 text-[10.54px] font-semibold font-['Euclid Circular A'] uppercase tracking-wide">Platforms</div> <div className="justify-start items-start gap-[12.05px] inline-flex"> <div className="w-[24.10px] h-[24.10px] relative overflow-hidden"> <div className="w-[20.39px] h-[24.10px] left-[1.85px] top-0 absolute"> </div> </div> <div className="w-[24.10px] h-[24.10px] relative overflow-hidden"> <div className="w-[19.66px] h-[24.10px] left-[2.22px] top-0 absolute"> </div> </div> </div> </div> </div> <div className="flex-col justify-start items-start gap-[13.56px] flex"> <div className="flex-col justify-start items-start gap-[3.77px] flex"> <div className="w-[242.52px] h-[13.56px]"><span class="text-gray-800 text-[10.54px] font-normal font-['Euclid Circular A'] tracking-wide">SIGN UP FOR </span><span class="text-gray-800 text-[10.54px] font-normal font-['Euclid Circular A'] uppercase tracking-wide">Laura’s Closet </span><span class="text-gray-800 text-[10.54px] font-normal font-['Euclid Circular A'] tracking-wide"> STYLE NEWS</span></div> <div className="justify-start items-start gap-1.5 inline-flex"> <div className="h-[33.14px] px-[12.05px] py-[9.79px] bg-white border border-gray-400 justify-start items-start gap-[7.53px] flex"> <div className="w-[57.24px] h-[13.56px] text-gray-500 text-[10.54px] font-normal font-['Euclid Circular A'] tracking-wide">Your email</div> </div> <div className="px-[22.60px] py-[9.79px] bg-gray-800 justify-start items-start gap-[7.53px] flex"> <div className="w-[55.73px] h-[13.56px] text-white text-[10.54px] font-semibold font-['Euclid Circular A'] uppercase tracking-wide">subcribe</div> </div> </div> </div> <div className="w-[387.13px] h-[11.30px]"><span class="text-gray-500 text-[9.04px] font-normal font-['Euclid Circular A'] tracking-wide">By clicking the SUBSCRIBE button, you are agreeing to our </span><span class="text-[#0f4fce] text-[9.04px] font-normal font-['Euclid Circular A'] underline tracking-wide">Privacy & Cookie Policy</span></div> </div> </div> </div> <div className="justify-start items-center gap-[229.72px] inline-flex"> <div className="flex-col justify-start items-start gap-[18.08px] inline-flex"> <div className="w-[256.08px] h-[13.56px] text-gray-500 text-[10.54px] font-normal font-['Euclid Circular A'] tracking-wide">©2010-2022 Laura’s Closet All Rights Reserved</div> <div className="flex-col justify-start items-start gap-[12.05px] flex"> <div className="justify-start items-center gap-[5.27px] inline-flex"> <div className="w-[81.34px] h-[13.56px] text-gray-500 text-[10.54px] font-normal font-['Euclid Circular A'] underline tracking-wide">Privacy Center</div> <div className="w-[129.55px] h-[13.56px] text-gray-500 text-[10.54px] font-normal font-['Euclid Circular A'] underline tracking-wide">Privacy & Cookie Policy</div> <div className="w-[91.89px] h-[13.56px] text-gray-500 text-[10.54px] font-normal font-['Euclid Circular A'] underline tracking-wide">Manage Cookies</div> </div> <div className="justify-start items-center gap-[5.27px] inline-flex"> <div className="w-[106.95px] h-[13.56px] text-gray-500 text-[10.54px] font-normal font-['Euclid Circular A'] underline tracking-wide">Terms & Conditions</div> <div className="w-[94.90px] h-[13.56px] text-gray-500 text-[10.54px] font-normal font-['Euclid Circular A'] underline tracking-wide">Copyright Notice</div> <div className="w-[39.92px] h-[13.56px] text-gray-500 text-[10.54px] font-normal font-['Euclid Circular A'] underline tracking-wide">Imprint</div> </div> </div> </div> <div className="flex-col justify-start items-start gap-[18.08px] inline-flex"> <div className="w-[64.77px] h-[13.56px] text-gray-800 text-[10.54px] font-semibold font-['Euclid Circular A'] uppercase tracking-wide">We accept</div> <div className="flex-col justify-start items-start gap-1.5 flex"> <div className="justify-start items-start gap-1.5 inline-flex"> <div className="w-[37.66px] h-[24.10px] justify-center items-center flex overflow-hidden"> <div className="w-[37.66px] h-[24.10px] relative"> <div className="w-[37.66px] h-[24.10px] left-0 top-0 absolute bg-[#0e355f] rounded-sm" /> <div className="w-[7.75px] h-[4.79px] left-[6.64px] top-[4.52px] absolute"> <div className="w-[7.75px] h-[4.79px] left-0 top-0 absolute"> </div> </div> </div> </div> <div className="w-[37.66px] h-[24.10px] justify-center items-center flex overflow-hidden"> <div className="w-[37.66px] h-[24.10px] relative"> <div className="w-[37.66px] h-[24.10px] left-0 top-0 absolute bg-[#082069] rounded-sm" /> <div className="w-[20.07px] h-[18.08px] left-[8.79px] top-[3.01px] absolute"> <div className="w-[20.07px] h-[5.35px] left-[-0px] top-[12.73px] absolute"> </div> <div className="w-[8.60px] h-[10.15px] left-[6.14px] top-0 absolute"> </div> </div> </div> </div> <div className="w-[37.66px] h-[24.10px] justify-center items-center flex overflow-hidden"> <div className="w-[37.66px] h-[24.10px] relative"> <div className="w-[37.66px] h-[24.10px] left-0 top-0 absolute bg-black rounded-sm" /> <div className="w-[28.62px] h-[11.47px] left-[4.52px] top-[6.32px] absolute"> </div> </div> </div> <div className="w-[37.66px] h-[24.10px] justify-center items-center flex overflow-hidden"> <div className="w-[37.66px] h-[24.10px] relative"> <div className="w-[37.66px] h-[24.10px] left-0 top-0 absolute bg-[#5485ec] rounded-sm" /> <div className="w-[28.62px] h-[11.37px] left-[4.52px] top-[7.12px] absolute"> <div className="w-[9.26px] h-[9.45px] left-0 top-0 absolute"> </div> </div> </div> </div> <div className="w-[37.66px] h-[24.10px] justify-center items-center flex overflow-hidden"> <div className="w-[37.66px] h-[24.10px] relative"> <div className="w-[37.66px] h-[24.10px] left-0 top-0 absolute bg-black rounded-sm" /> <div className="w-[28.62px] h-[9.32px] left-[4.52px] top-[7.39px] absolute"> </div> </div> </div> <div className="w-[37.66px] h-[24.10px] justify-center items-center flex overflow-hidden"> <div className="w-[37.66px] h-[24.10px] relative"> <div className="w-[37.66px] h-[24.10px] left-0 top-0 absolute bg-[#f8f8f8] rounded-sm" /> <div className="w-[37.66px] h-[24.10px] left-0 top-0 absolute"> <div className="w-[37.66px] h-[24.10px] left-0 top-0 absolute bg-[#f9f9f9] rounded-sm" /> </div> <div className="w-[28.62px] h-[4.82px] left-[4.52px] top-[9.64px] absolute"> <div className="w-[4.82px] h-[4.82px] left-[12.55px] top-[-0px] absolute"> </div> <div className="w-[0.69px] h-[0.69px] left-[27.93px] top-[0.03px] absolute"> </div> </div> </div> </div> <div className="w-[37.66px] h-[24.10px] justify-center items-center flex overflow-hidden"> <div className="w-[37.66px] h-[24.10px] relative"> <div className="w-[37.66px] h-[24.10px] left-0 top-0 absolute bg-[#0d0d0d] rounded-sm" /> <div className="w-[25.31px] h-1 left-[3.44px] top-[15.38px] absolute"> <div className="w-[8.28px] h-1 left-[20.23px] top-0 absolute"> </div> </div> </div> </div> <div className="w-[37.66px] h-[24.10px] justify-center items-center flex overflow-hidden"> <div className="w-[37.66px] h-[24.10px] relative"> <div className="w-[37.66px] h-[24.10px] left-0 top-0 absolute bg-black rounded-sm" /> <div className="w-[28.48px] h-[9.79px] left-[5.30px] top-[7.16px] absolute"> <div className="w-[28.48px] h-[4.91px] left-[-0px] top-[2.77px] absolute"> </div> </div> </div> </div> </div> <div className="justify-start items-start gap-1.5 inline-flex"> <div className="w-[37.66px] h-[24.10px] justify-center items-center flex overflow-hidden"> <div className="w-[37.66px] h-[24.10px] relative"> <div className="w-[37.66px] h-[24.10px] left-0 top-0 absolute bg-black rounded-sm" /> </div> </div> <div className="w-[37.66px] h-[24.10px] justify-center items-center flex overflow-hidden"> <div className="w-[37.66px] h-[24.20px] relative"> <div className="w-[37.66px] h-[24.10px] left-0 top-[0.10px] absolute bg-[#306fc8] rounded-sm" /> <div className="w-[37.66px] h-[24.10px] left-0 top-0 absolute"> <div className="w-[37.66px] h-[24.10px] left-0 top-0 absolute bg-gradient-to-b from-[#1b8aba] to-[#005d9c] rounded-sm" /> <div className="w-[37.89px] h-[13.64px] left-0 top-[5.27px] absolute"> </div> </div> </div> </div> <div className="w-[37.66px] h-[24.10px] justify-center items-center flex overflow-hidden"> <div className="w-[37.66px] h-[24.10px] relative"> <div className="w-[37.66px] h-[24.10px] left-0 top-0 absolute bg-[#333333] rounded-sm" /> <div className="w-[28.62px] h-[8.60px] left-[4.52px] top-[8.74px] absolute"> <div className="w-[15.16px] h-[3.43px] left-[4.09px] top-[5.17px] absolute"> </div> </div> </div> </div> <div className="w-[37.66px] h-[24.10px] justify-center items-center flex overflow-hidden"> <div className="w-[37.66px] h-[24.10px] relative"> <div className="w-[37.66px] h-[24.10px] left-0 top-0 absolute bg-[#499fe3] rounded-sm" /> <div className="w-[31.63px] h-[8.80px] left-[3.01px] top-[7.65px] absolute"> </div> </div> </div> <div className="w-[37.66px] h-[24.10px] justify-center items-center flex overflow-hidden"> <div className="w-[37.66px] h-[24.10px] relative"> <div className="w-[37.66px] h-[24.10px] left-0 top-0 absolute bg-[#2e408b] rounded-sm" /> </div> </div> <div className="w-[37.66px] h-[24.10px] justify-center items-center flex overflow-hidden"> <div className="w-[37.66px] h-[24.10px] relative"> <div className="w-[37.66px] h-[24.10px] left-0 top-0 absolute bg-[#f7931a] rounded-sm" /> <div className="w-[21px] h-[17.39px] left-[8.33px] top-[3.37px] absolute"> <div className="w-[21px] h-[5.57px] left-0 top-[11.82px] absolute"> </div> <div className="w-[9.79px] h-[9.79px] left-[5.60px] top-0 absolute"> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div className="left-[72.30px] top-[164.19px] absolute flex-col justify-start items-start gap-[13.56px] inline-flex"> <div className="w-[78.33px] h-[18.83px] text-white text-[15.06px] font-semibold font-['Euclid Circular A'] tracking-tight">Ladies Top</div> <div className="w-[458.68px] h-[15.06px]"><span class="text-gray-300 text-xs font-normal font-['Euclid Circular A'] tracking-tight">Slash Sales begins in April. Get up to 80% Discount on all products </span><span class="text-gray-50 text-xs font-bold font-['Euclid Circular A'] tracking-tight">Read More</span></div> </div> <div className="w-[212.40px] h-[15.06px] left-[54.23px] top-[274.91px] absolute"><span class="text-gray-800 text-xs font-semibold font-['Euclid Circular A'] tracking-tight">Showing 1 - 20</span><span class="text-black text-xs font-normal font-['Euclid Circular A'] tracking-tight"> </span><span class="text-gray-600 text-xs font-normal font-['Euclid Circular A'] tracking-tight">out of 2,356 Products</span></div> <div className="left-[887.99px] top-[274.91px] absolute justify-center items-center gap-1.5 inline-flex"> <div className="w-[45.94px] h-[15.06px] text-gray-500 text-xs font-normal font-['Euclid Circular A'] tracking-tight">Sort by:</div> <div className="w-[76.07px] h-[15.06px] text-gray-800 text-xs font-semibold font-['Euclid Circular A'] tracking-tight">New Arrivals</div> </div> <div className="w-[223.69px] h-[369.81px] left-[323.86px] top-[326.12px] absolute border border-gray-200 overflow-hidden"> <img className="w-[223.69px] h-[258.34px] left-[-0px] top-0 absolute" src="https://via.placeholder.com/224x258" /> <div className="p-[9.04px] left-[175.49px] top-[12.05px] absolute bg-black/30 backdrop-blur-[30.13px] flex-col justify-center items-center gap-[7.53px] inline-flex"> <div className="w-[18.08px] h-[18.08px] relative overflow-hidden" /> </div> <div className="w-[199.59px] h-[33.14px] left-[12.05px] top-[270.39px] absolute text-gray-800 text-[10.54px] font-normal font-['Euclid Circular A'] leading-none tracking-tight">Striped Flutter Sleeve Overlap Collar Peplum Hem Blouse</div> <div className="w-[99.42px] h-[48.20px] left-[12.05px] top-[309.55px] absolute"><span class="text-gray-700 text-sm font-semibold font-['Euclid Circular A'] leading-normal">$120.23 </span><span class="text-gray-400 text-sm font-normal font-['Euclid Circular A'] line-through leading-normal">$120.23</span></div> <div className="w-[55.73px] h-[15.06px] left-[155.91px] top-[314.83px] absolute text-gray-600 text-xs font-normal font-['Euclid Circular A']">24 Orders</div> <div className="px-[9.04px] py-[2.26px] left-[140.09px] top-[335.16px] absolute bg-gray-900 justify-start items-start gap-[7.53px] inline-flex"> <div className="w-[53.48px] h-[11.30px] text-white text-[9.04px] font-normal font-['Euclid Circular A']">New Arrivals</div> </div> </div> <div className="w-[223.69px] h-[369.81px] left-[323.86px] top-[711px] absolute border border-gray-200 overflow-hidden"> <img className="w-[223.69px] h-[258.34px] left-[-0px] top-0 absolute" src="https://via.placeholder.com/224x258" /> <div className="w-[199.59px] h-[33.14px] left-[12.05px] top-[270.39px] absolute text-gray-800 text-[10.54px] font-normal font-['Euclid Circular A'] leading-none tracking-tight">Striped Flutter Sleeve Overlap Collar Peplum Hem Blouse</div> <div className="w-[99.42px] h-[48.20px] left-[12.05px] top-[309.55px] absolute"><span class="text-gray-700 text-sm font-semibold font-['Euclid Circular A'] leading-normal">$120.23 </span><span class="text-gray-400 text-sm font-normal font-['Euclid Circular A'] line-through leading-normal">$120.23</span></div> <div className="w-[55.73px] h-[15.06px] left-[155.91px] top-[314.83px] absolute text-gray-600 text-xs font-normal font-['Euclid Circular A']">24 Orders</div> <div className="p-[9.04px] left-[175.49px] top-[12.05px] absolute bg-black/30 backdrop-blur-[30.13px] flex-col justify-center items-center gap-[7.53px] inline-flex"> <div className="w-[18.08px] h-[18.08px] relative overflow-hidden" /> </div> </div> <div className="w-[223.69px] h-[369.81px] left-[323.86px] top-[1095.87px] absolute border border-gray-200 overflow-hidden"> <img className="w-[223.69px] h-[258.34px] left-[-0px] top-0 absolute" src="https://via.placeholder.com/224x258" /> <div className="w-[199.59px] h-[33.14px] left-[12.05px] top-[270.39px] absolute text-gray-800 text-[10.54px] font-normal font-['Euclid Circular A'] leading-none tracking-tight">Striped Flutter Sleeve Overlap Collar Peplum Hem Blouse</div> <div className="w-[99.42px] h-[48.20px] left-[12.05px] top-[309.55px] absolute"><span class="text-gray-700 text-sm font-semibold font-['Euclid Circular A'] leading-normal">$120.23 </span><span class="text-gray-400 text-sm font-normal font-['Euclid Circular A'] line-through leading-normal">$120.23</span></div> <div className="w-[55.73px] h-[15.06px] left-[155.91px] top-[314.83px] absolute text-gray-600 text-xs font-normal font-['Euclid Circular A']">24 Orders</div> <div className="p-[9.04px] left-[175.49px] top-[12.05px] absolute bg-black/30 backdrop-blur-[30.13px] flex-col justify-center items-center gap-[7.53px] inline-flex"> <div className="w-[18.08px] h-[18.08px] relative overflow-hidden" /> </div> </div> <div className="w-[223.69px] h-[369.81px] left-[562.62px] top-[326.12px] absolute border border-gray-200 overflow-hidden"> <img className="w-[223.69px] h-[258.34px] left-[-0px] top-0 absolute" src="https://via.placeholder.com/224x258" /> <div className="w-[199.59px] h-[33.14px] left-[12.05px] top-[270.39px] absolute text-gray-800 text-[10.54px] font-normal font-['Euclid Circular A'] leading-none tracking-tight">Striped Flutter Sleeve Overlap Collar Peplum Hem Blouse</div> <div className="w-[99.42px] h-[48.20px] left-[12.05px] top-[309.55px] absolute"><span class="text-gray-700 text-sm font-semibold font-['Euclid Circular A'] leading-normal">$120.23 </span><span class="text-gray-400 text-sm font-normal font-['Euclid Circular A'] line-through leading-normal">$120.23</span></div> <div className="w-[55.73px] h-[15.06px] left-[155.91px] top-[314.83px] absolute text-gray-600 text-xs font-normal font-['Euclid Circular A']">24 Orders</div> <div className="p-[9.04px] left-[175.49px] top-[12.05px] absolute bg-black/30 backdrop-blur-[30.13px] flex-col justify-center items-center gap-[7.53px] inline-flex"> <div className="w-[18.08px] h-[18.08px] relative overflow-hidden" /> </div> </div> <div className="w-[223.69px] h-[369.81px] left-[562.62px] top-[711px] absolute border border-gray-200 overflow-hidden"> <img className="w-[223.69px] h-[258.34px] left-[-0px] top-0 absolute" src="https://via.placeholder.com/224x258" /> <div className="w-[199.59px] h-[33.14px] left-[12.05px] top-[270.39px] absolute text-gray-800 text-[10.54px] font-normal font-['Euclid Circular A'] leading-none tracking-tight">Striped Flutter Sleeve Overlap Collar Peplum Hem Blouse</div> <div className="w-[99.42px] h-[48.20px] left-[12.05px] top-[309.55px] absolute"><span class="text-gray-700 text-sm font-semibold font-['Euclid Circular A'] leading-normal">$120.23 </span><span class="text-gray-400 text-sm font-normal font-['Euclid Circular A'] line-through leading-normal">$120.23</span></div> <div className="w-[55.73px] h-[15.06px] left-[155.91px] top-[314.83px] absolute text-gray-600 text-xs font-normal font-['Euclid Circular A']">24 Orders</div> <div className="p-[9.04px] left-[175.49px] top-[12.05px] absolute bg-black/30 backdrop-blur-[30.13px] flex-col justify-center items-center gap-[7.53px] inline-flex"> <div className="w-[18.08px] h-[18.08px] relative overflow-hidden" /> </div> <div className="px-[9.04px] py-[2.26px] left-[140.09px] top-[335.16px] absolute bg-gray-900 justify-start items-start gap-[7.53px] inline-flex"> <div className="w-[53.48px] h-[11.30px] text-white text-[9.04px] font-normal font-['Euclid Circular A']">New Arrivals</div> </div> </div> <div className="w-[223.69px] h-[369.81px] left-[562.62px] top-[1095.87px] absolute border border-gray-200 overflow-hidden"> <img className="w-[223.69px] h-[258.34px] left-[-0px] top-0 absolute" src="https://via.placeholder.com/224x258" /> <div className="w-[199.59px] h-[33.14px] left-[12.05px] top-[270.39px] absolute text-gray-800 text-[10.54px] font-normal font-['Euclid Circular A'] leading-none tracking-tight">Striped Flutter Sleeve Overlap Collar Peplum Hem Blouse</div> <div className="w-[99.42px] h-[48.20px] left-[12.05px] top-[309.55px] absolute"><span class="text-gray-700 text-sm font-semibold font-['Euclid Circular A'] leading-normal">$120.23 </span><span class="text-gray-400 text-sm font-normal font-['Euclid Circular A'] line-through leading-normal">$120.23</span></div> <div className="w-[55.73px] h-[15.06px] left-[155.91px] top-[314.83px] absolute text-gray-600 text-xs font-normal font-['Euclid Circular A']">24 Orders</div> <div className="p-[9.04px] left-[175.49px] top-[12.05px] absolute bg-black/30 backdrop-blur-[30.13px] flex-col justify-center items-center gap-[7.53px] inline-flex"> <div className="w-[18.08px] h-[18.08px] relative overflow-hidden" /> </div> <div className="px-[9.04px] py-[2.26px] left-[140.09px] top-[335.16px] absolute bg-gray-900 justify-start items-start gap-[7.53px] inline-flex"> <div className="w-[53.48px] h-[11.30px] text-white text-[9.04px] font-normal font-['Euclid Circular A']">New Arrivals</div> </div> </div> <div className="w-[223.69px] h-[369.81px] left-[801.38px] top-[326.12px] absolute border border-gray-200 overflow-hidden"> <img className="w-[223.69px] h-[258.34px] left-0 top-0 absolute" src="https://via.placeholder.com/224x258" /> <div className="w-[199.59px] h-[33.14px] left-[12.05px] top-[270.39px] absolute text-gray-800 text-[10.54px] font-normal font-['Euclid Circular A'] leading-none tracking-tight">Striped Flutter Sleeve Overlap Collar Peplum Hem Blouse</div> <div className="w-[99.42px] h-[48.20px] left-[12.05px] top-[309.55px] absolute"><span class="text-gray-700 text-sm font-semibold font-['Euclid Circular A'] leading-normal">$120.23 </span><span class="text-gray-400 text-sm font-normal font-['Euclid Circular A'] line-through leading-normal">$120.23</span></div> <div className="w-[55.73px] h-[15.06px] left-[155.91px] top-[314.83px] absolute text-gray-600 text-xs font-normal font-['Euclid Circular A']">24 Orders</div> <div className="p-[9.04px] left-[175.49px] top-[12.05px] absolute bg-black/30 backdrop-blur-[30.13px] flex-col justify-center items-center gap-[7.53px] inline-flex"> <div className="w-[18.08px] h-[18.08px] relative overflow-hidden" /> </div> </div> <div className="w-[223.69px] h-[369.81px] left-[801.38px] top-[711px] absolute border border-gray-200 overflow-hidden"> <img className="w-[223.69px] h-[258.34px] left-0 top-0 absolute" src="https://via.placeholder.com/224x258" /> <div className="w-[199.59px] h-[33.14px] left-[12.05px] top-[270.39px] absolute text-gray-800 text-[10.54px] font-normal font-['Euclid Circular A'] leading-none tracking-tight">Striped Flutter Sleeve Overlap Collar Peplum Hem Blouse</div> <div className="w-[99.42px] h-[48.20px] left-[12.05px] top-[309.55px] absolute"><span class="text-gray-700 text-sm font-semibold font-['Euclid Circular A'] leading-normal">$120.23 </span><span class="text-gray-400 text-sm font-normal font-['Euclid Circular A'] line-through leading-normal">$120.23</span></div> <div className="w-[55.73px] h-[15.06px] left-[155.91px] top-[314.83px] absolute text-gray-600 text-xs font-normal font-['Euclid Circular A']">24 Orders</div> <div className="p-[9.04px] left-[175.49px] top-[12.05px] absolute bg-black/30 backdrop-blur-[30.13px] flex-col justify-center items-center gap-[7.53px] inline-flex"> <div className="w-[18.08px] h-[18.08px] relative overflow-hidden" /> </div> </div> <div className="w-[223.69px] h-[369.81px] left-[801.38px] top-[1095.87px] absolute border border-gray-200 overflow-hidden"> <img className="w-[223.69px] h-[258.34px] left-0 top-0 absolute" src="https://via.placeholder.com/224x258" /> <div className="w-[199.59px] h-[33.14px] left-[12.05px] top-[270.39px] absolute text-gray-800 text-[10.54px] font-normal font-['Euclid Circular A'] leading-none tracking-tight">Striped Flutter Sleeve Overlap Collar Peplum Hem Blouse</div> <div className="w-[99.42px] h-[48.20px] left-[12.05px] top-[309.55px] absolute"><span class="text-gray-700 text-sm font-semibold font-['Euclid Circular A'] leading-normal">$120.23 </span><span class="text-gray-400 text-sm font-normal font-['Euclid Circular A'] line-through leading-normal">$120.23</span></div> <div className="w-[55.73px] h-[15.06px] left-[155.91px] top-[314.83px] absolute text-gray-600 text-xs font-normal font-['Euclid Circular A']">24 Orders</div> <div className="p-[9.04px] left-[175.49px] top-[12.05px] absolute bg-black/30 backdrop-blur-[30.13px] flex-col justify-center items-center gap-[7.53px] inline-flex"> <div className="w-[18.08px] h-[18.08px] relative overflow-hidden" /> </div> </div> <div className="w-[4.52px] h-[15.06px] left-[884.23px] top-[1502.58px] absolute text-gray-600 text-xs font-normal font-['Euclid Circular A']">1</div> <div className="w-[6.78px] h-[15.06px] left-[915.11px] top-[1502.58px] absolute text-gray-600 text-xs font-normal font-['Euclid Circular A']">2</div> <div className="w-[9.79px] h-[15.06px] left-[944.48px] top-[1502.58px] absolute text-gray-600 text-xs font-normal font-['Euclid Circular A']">...</div> <div className="w-[11.30px] h-[15.06px] left-[976.11px] top-[1502.58px] absolute text-gray-600 text-xs font-normal font-['Euclid Circular A']">13</div> <div className="w-[24.10px] h-[24.10px] left-[842.80px] top-[1498.06px] absolute bg-gray-300" /> <div className="w-[24.10px] h-[24.10px] left-[874.43px] top-[1498.06px] absolute border border-gray-300" /> <div className="w-[24.10px] h-[24.10px] left-[906.07px] top-[1498.06px] absolute border border-gray-300" /> <div className="w-[24.10px] h-[24.10px] left-[937.70px] top-[1498.06px] absolute border border-gray-300" /> <div className="w-[24.10px] h-[24.10px] left-[969.33px] top-[1498.06px] absolute border border-gray-300" /> <div className="w-[24.10px] h-[24.10px] left-[1000.97px] top-[1498.06px] absolute bg-gray-800" /> <div className="w-[976.11px] h-[89.63px] left-[54.23px] top-[143.10px] absolute"> <div className="w-[976.11px] h-[89.63px] left-0 top-0 absolute bg-gray-900" /> </div> <div className="w-[18.08px] h-[18.08px] left-[845.81px] top-[1501.08px] absolute overflow-hidden" /> <div className="w-[18.08px] h-[18.08px] left-[1022.06px] top-[1519.15px] absolute origin-top-left -rotate-180 overflow-hidden" /> <div className="left-[72.30px] top-[356.25px] absolute flex-col justify-start items-start gap-[40.67px] inline-flex"> <div className="flex-col justify-start items-start gap-[18.08px] flex"> <div className="w-[43.68px] h-[15.06px] text-gray-800 text-xs font-semibold font-['Euclid Circular A'] uppercase tracking-tight">Prices</div> <div className="flex-col justify-start items-start gap-[19.58px] flex"> <div className="justify-start items-start gap-[127.29px] inline-flex"> <div className="w-[33.14px] h-[13.56px] text-gray-600 text-[10.54px] font-normal font-['Euclid Circular A'] tracking-tight">Range</div> <div className="w-[57.99px] h-[13.56px] text-gray-800 text-[10.54px] font-normal font-['Euclid Circular A'] tracking-tight">$120 - $300</div> </div> <div className="w-[213.90px] h-[9.04px] relative"> <div className="w-[9.04px] h-[9.04px] left-[27.87px] top-0 absolute"> </div> <div className="w-[9.04px] h-[9.04px] left-[177.75px] top-0 absolute"> </div> </div> </div> </div> <div className="flex-col justify-start items-start gap-[24.10px] flex"> <div className="w-[45.94px] h-[15.06px] text-gray-800 text-xs font-semibold font-['Euclid Circular A'] uppercase tracking-tight">Filters</div> <div className="flex-col justify-start items-start gap-[15.06px] flex"> <div className="justify-start items-start gap-[12.05px] inline-flex"> <div className="w-[13.56px] h-[13.56px] border border-gray-700" /> <div className="w-[39.17px] h-[13.56px] text-gray-800 text-[10.54px] font-normal font-['Euclid Circular A'] tracking-tight">Women</div> </div> <div className="justify-start items-start gap-[12.05px] inline-flex"> <div className="w-[13.56px] h-[13.56px] border border-gray-700" /> <div className="w-[33.89px] h-[13.56px] text-gray-800 text-[10.54px] font-normal font-['Euclid Circular A'] tracking-tight">Ladies</div> </div> <div className="justify-start items-start gap-[12.05px] inline-flex"> <div className="w-[13.56px] h-[13.56px] border border-gray-700" /> <div className="w-[24.10px] h-[13.56px] text-gray-800 text-[10.54px] font-normal font-['Euclid Circular A'] tracking-tight">Girls</div> </div> <div className="justify-start items-start gap-[12.05px] inline-flex"> <div className="w-[13.56px] h-[13.56px] border border-gray-700" /> <div className="w-[34.65px] h-[13.56px] text-gray-800 text-[10.54px] font-normal font-['Euclid Circular A'] tracking-tight">Babies</div> </div> </div> </div> <div className="flex-col justify-start items-start gap-[24.10px] flex"> <div className="w-[51.22px] h-[15.06px] text-gray-800 text-xs font-semibold font-['Euclid Circular A'] uppercase tracking-tight">Brands</div> <div className="flex-col justify-start items-start gap-[15.06px] flex"> <div className="justify-start items-start gap-[12.05px] inline-flex"> <div className="w-[13.56px] h-[13.56px] border border-gray-700" /> <div className="w-[25.61px] h-[13.56px] text-gray-800 text-[10.54px] font-normal font-['Euclid Circular A'] tracking-tight">H&M</div> </div> <div className="justify-start items-start gap-[12.05px] inline-flex"> <div className="w-[13.56px] h-[13.56px] border border-gray-700" /> <div className="w-[82.10px] h-[13.56px] text-gray-800 text-[10.54px] font-normal font-['Euclid Circular A'] tracking-tight">Mark & Spencer</div> </div> <div className="justify-start items-start gap-[12.05px] inline-flex"> <div className="w-[13.56px] h-[13.56px] border border-gray-700" /> <div className="w-[85.11px] h-[13.56px] text-gray-800 text-[10.54px] font-normal font-['Euclid Circular A'] tracking-tight">Victoria’s Secret</div> </div> <div className="justify-start items-start gap-[12.05px] inline-flex"> <div className="w-[13.56px] h-[13.56px] border border-gray-700" /> <div className="w-[21.09px] h-[13.56px] text-gray-800 text-[10.54px] font-normal font-['Euclid Circular A'] tracking-tight">Dior</div> </div> <div className="justify-start items-start gap-[12.05px] inline-flex"> <div className="w-[13.56px] h-[13.56px] border border-gray-700" /> <div className="w-[30.88px] h-[13.56px] text-gray-800 text-[10.54px] font-normal font-['Euclid Circular A'] tracking-tight">Gucci</div> </div> <div className="justify-start items-start gap-[12.05px] inline-flex"> <div className="w-[13.56px] h-[13.56px] border border-gray-700" /> <div className="w-[27.87px] h-[13.56px] text-gray-800 text-[10.54px] font-normal font-['Euclid Circular A'] tracking-tight">Fendi</div> </div> <div className="justify-start items-start gap-[12.05px] inline-flex"> <div className="w-[13.56px] h-[13.56px] border border-gray-700" /> <div className="w-[30.88px] h-[13.56px] text-gray-800 text-[10.54px] font-normal font-['Euclid Circular A'] tracking-tight">Prada</div> </div> <div className="justify-start items-start gap-[12.05px] inline-flex"> <div className="w-[13.56px] h-[13.56px] border border-gray-700" /> <div className="w-[42.18px] h-[13.56px] text-gray-800 text-[10.54px] font-normal font-['Euclid Circular A'] tracking-tight">Versace</div> </div> <div className="justify-start items-start gap-[12.05px] inline-flex"> <div className="w-[13.56px] h-[13.56px] border border-gray-700" /> <div className="w-[93.39px] h-[13.56px] text-gray-800 text-[10.54px] font-normal font-['Euclid Circular A'] tracking-tight">Dolce & Gabbana</div> </div> <div className="justify-start items-start gap-[12.05px] inline-flex"> <div className="w-[13.56px] h-[13.56px] border border-gray-700" /> <div className="w-[24.10px] h-[13.56px] text-gray-800 text-[10.54px] font-normal font-['Euclid Circular A'] tracking-tight">Zara</div> </div> <div className="justify-start items-start gap-[12.05px] inline-flex"> <div className="w-[13.56px] h-[13.56px] border border-gray-700" /> <div className="w-[37.66px] h-[13.56px] text-gray-800 text-[10.54px] font-normal font-['Euclid Circular A'] tracking-tight">Chanel</div> </div> <div className="justify-start items-start gap-[12.05px] inline-flex"> <div className="w-[13.56px] h-[13.56px] border border-gray-50" /> <div className="w-[56.49px] h-[13.56px] text-[#eb5757] text-[10.54px] font-normal font-['Euclid Circular A'] tracking-tight">+ 234 more</div> </div> </div> </div> <div className="flex-col justify-start items-start gap-[24.10px] flex"> <div className="w-[78.33px] h-[15.06px] text-gray-800 text-xs font-semibold font-['Euclid Circular A'] uppercase tracking-tight">Categories</div> <div className="flex-col justify-start items-start gap-[15.06px] flex"> <div className="justify-start items-start gap-[12.05px] inline-flex"> <div className="w-[13.56px] h-[13.56px] border border-gray-700" /> <div className="w-[39.92px] h-[13.56px] text-gray-800 text-[10.54px] font-normal font-['Euclid Circular A'] tracking-tight">Dresses</div> </div> <div className="justify-start items-start gap-[12.05px] inline-flex"> <div className="w-[13.56px] h-[13.56px] border border-gray-700" /> <div className="w-[24.10px] h-[13.56px] text-gray-800 text-[10.54px] font-normal font-['Euclid Circular A'] tracking-tight">Tops</div> </div> <div className="justify-start items-start gap-[12.05px] inline-flex"> <div className="w-[13.56px] h-[13.56px] border border-gray-700" /> <div className="w-[123.52px] h-[13.56px] text-gray-800 text-[10.54px] font-normal font-['Euclid Circular A'] tracking-tight">Lingerie & Lounge Wear</div> </div> <div className="justify-start items-start gap-[12.05px] inline-flex"> <div className="w-[13.56px] h-[13.56px] border border-gray-700" /> <div className="w-[33.89px] h-[13.56px] text-gray-800 text-[10.54px] font-normal font-['Euclid Circular A'] tracking-tight">Blouse</div> </div> <div className="justify-start items-start gap-[12.05px] inline-flex"> <div className="w-[13.56px] h-[13.56px] border border-gray-700" /> <div className="w-[41.42px] h-[13.56px] text-gray-800 text-[10.54px] font-normal font-['Euclid Circular A'] tracking-tight">Vintage</div> </div> <div className="justify-start items-start gap-[12.05px] inline-flex"> <div className="w-[13.56px] h-[13.56px] border border-gray-50" /> <div className="w-[44.44px] h-[13.56px] text-[#eb5757] text-[10.54px] font-normal font-['Euclid Circular A'] tracking-tight">+ 4 more</div> </div> </div> </div> <div className="flex-col justify-start items-start gap-[24.10px] flex"> <div className="w-[26.36px] h-[15.06px] text-gray-800 text-xs font-semibold font-['Euclid Circular A'] uppercase tracking-tight">Size</div> <div className="flex-col justify-start items-start gap-[15.06px] flex"> <div className="justify-start items-start gap-[12.05px] inline-flex"> <div className="w-[13.56px] h-[13.56px] border border-gray-700" /> <div className="w-[41.42px] h-[13.56px] text-gray-800 text-[10.54px] font-normal font-['Euclid Circular A'] tracking-tight">Medium</div> </div> <div className="justify-start items-start gap-[12.05px] inline-flex"> <div className="w-[13.56px] h-[13.56px] border border-gray-700" /> <div className="w-[30.13px] h-[13.56px] text-gray-800 text-[10.54px] font-normal font-['Euclid Circular A'] tracking-tight">Large</div> </div> <div className="justify-start items-start gap-[12.05px] inline-flex"> <div className="w-[13.56px] h-[13.56px] border border-gray-700" /> <div className="w-[43.68px] h-[13.56px] text-gray-800 text-[10.54px] font-normal font-['Euclid Circular A'] tracking-tight">Plus Size</div> </div> <div className="justify-start items-start gap-[12.05px] inline-flex"> <div className="w-[13.56px] h-[13.56px] border border-gray-700" /> <div className="w-[70.80px] h-[13.56px] text-gray-800 text-[10.54px] font-normal font-['Euclid Circular A'] tracking-tight">Sexy Plus Size</div> </div> </div> </div> </div> </div> you develop reactjs and material ui