Delivery - Copy this React, Tailwind Component to your project

Import React from "react"; const Delivery = () => { const deliveryOptions = [ { imgSrc: "https://png.pngtree.com/png vector/20191129/ourmid/pngtree fast delivery icon delivery icon png image_2047531.jpg", title: "Free Delivery", description: "When you spend $80 or more", }, { imgSrc: "https://encrypted tbn0.gstatic.com/images?q=tbn:ANd9GcSX7J2fXn LGc7O2l1JlVreaaXFRq8StlORHw&s", title: "We're Available", description: "Need help? Contact any time", }, { imgSrc: "https://encrypted tbn0.gstatic.com/images?q=tbn:ANd9GcRXm1jmiUTYV2Jwt1RYNGfI5k1KIEYuLfTfqg&s", title: "Satisfied or Return", description: "30 days easy return", }, { imgSrc: "https://encrypted tbn0.gstatic.com/images?q=tbn:ANd9GcQWlYhnFoUNW_HZHOzQqPK2dMHBN6k1I6P2gA&s", title: "Secure Payment", description: "Visa, Mastercard, Stripe, PayPal", }, ]; return ( <div className="bg gradient to r from blue 500 to indigo 600 py 8"> <div className="container mx auto grid grid cols 1 gap 8"> {deliveryOptions.map(({ imgSrc, title, description }) => ( <div key={title} className="flex flex col items center p 6 bg white rounded xl shadow lg" > <img className="w 20 h 20 mb 3" src={imgSrc} alt={`${title} icon`} /> <p className="font bold text xl text gray 800">{title}</p> <p className="text gray 600 text center text base">{description}</p> </div> ))} </div> </div> ); }; export default Delivery; make it looking good