Services Content - Copy this React, Tailwind Component to your project

Import React from "react" import { BiBuilding, BiSolidEditAlt, BiWrench, BiSupport } from "react icons/bi"; import { FaMap } from "react icons/fa"; export default function ServicesContent() { const services = [ { title: "Thành lập bản đồ", description: "Cung cấp các dịch vụ liên quan đến thành lập bản đồ và hồ sơ địa giới hành chính, xây dựng quy hoạch, kế hoạch sử dụng đất, và đo vẽ bản đồ địa chính...", icon: <FaMap className="w 12 h 12 text gray 900" />, }, { title: "Tư vấn xây dựng", description: "Cung cấp dịch vụ tư vấn toàn diện trong việc xây dựng các đề án nâng cấp, chia tách, sáp nhập đơn vị hành chính các cấp, cũng như các dự án trong lĩnh vực đo đạc, bản đồ, quản lý đất đai, môi trường và thông tin địa lý.", icon: <BiBuilding className="w 12 h 12 text gray 900" />, }, { title: "Lập quy hoạch xây dựng", description: "Cung cấp các dịch vụ tư vấn lập quy hoạch xây dựng, thiết kế, thẩm tra thiết kế cho các công trình dân dụng, công nghiệp, giao thông, hạ tầng kỹ thuật, và khảo sát xây dựng, địa hình.", icon: <BiSolidEditAlt className="w 12 h 12 text gray 900" />, }, { title: "Các dịch vụ về tư liệu, kỹ thuật", description: "Cung cấp các sản phẩm, thiết bị, vật tư và dịch vụ liên quan đến công nghệ và kỹ thuật trong các lĩnh vực xuất bản, in, phát hành, và quảng cáo. Chuyên môn của chúng tôi đảm bảo các giải pháp chất lượng cao phù hợp với nhu cầu của doanh nghiệp bạn.", icon: <BiSupport className="w 12 h 12 text gray 900" />, } ]; return ( <div id="services" className="py 8 bg gray 50 flex grow"> <div className="max w 7xl mx auto p 2 "> <h2 className="text 4xl font bold text center mb 12">Dịch vụ</h2> <div className="grid md:grid cols 2 lg:grid cols 4 gap 8"> {services.map((service, index) => ( <div key={index} className="bg white rounded lg shadow lg p 6 hover:shadow xl transition shadow duration 300 flex flex col justify between h full" > <div className=""> <div className="flex justify center mb 4">{service.icon}</div> <h3 className="text xl font semibold text center mb 4"> {service.title} </h3> <p className="text gray 600 text center mb 6"> {service.description} </p> </div> <button // onClick={() => setSelectedService(service)} className="w full bg black text white py 2 rounded lg hover:bg gray 600 transition colors" > Xem thêm </button> </div> ))} </div> </div> </div> ) } tôi mốn khi di chuột tới đâu thỳ ảnh ở đó trồi lên tý