Services - Copy this React, Tailwind Component to your project

Improve the display of the following code import React from "react"; import L1 from "../assets/Logos_Services/IC_1.png"; import L2 from "../assets/Logos_Services/IC_2.png"; import L3 from "../assets/Logos_Services/IC_3.png"; import L4 from "../assets/Logos_Services/IC_4.png"; import L5 from "../assets/Logos_Services/IC_5.png"; import L6 from "../assets/Logos_Services/IC_6.png"; import L7 from "../assets/Logos_Services/IC_7.png"; import L8 from "../assets/Logos_Services/IC_8.png"; const services = [ { title: "Fast, reliable service 24/7", icon: L1 }, { title: "Discounted service rates for contract customers", icon: L2, }, { title: "Factory trained technicians", icon: L3 }, { title: "NICET certified technicians", icon: L4 }, { title: "State Certified Technicians", icon: L5 }, { title: "Onsite training", icon: L6 }, { title: "Pre action testing installation & repair", icon: L7, }, { title: "Fire suppression test, installation, modifications & repair", icon: L8, }, ]; export default function Services() { return ( <div className="max w [85rem] px 4 py 10 sm:px 6 lg:px 8 lg:py 14 mx auto"> <h2 className="text 3xl font bold text center text gray 800 mb 10" style={{ fontFamily: "Roboto, sans serif", fontWeight: 500 }} > Why Choose Us </h2> <div className="grid grid cols 2 md:grid cols 3 lg:grid cols 4 gap 6"> {services.map((service, index) => ( <div key={index} className="h 36 sm:h 56 flex flex col justify center items center border border gray 200 rounded xl text center p 4 md:p 5 transition all duration 300 transform hover:scale 110 hover:shadow lg" > <div className="flex justify center items center w 16 h 16 sm:w 20 sm:h 20 rounded lg mx auto"> <img src={service.icon} alt={service.title} className="w full h full object contain" /> </div> <div className="mt 3"> <h3 className="text sm sm:text lg font semibold text gray 800"> {service.title} </h3> </div> </div> ))} </div> </div> ); }