Service Box - Copy this React, Tailwind Component to your project

import React from 'react'; import { Camera, Edit3 } from 'lucide-react'; const ServiceBox = ({ icon, title, description }) => { return ( <div className="max-w-sm rounded overflow-hidden shadow-lg m-4 p-4 hover:shadow-xl transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-110"> <div className="px-6 py-4"> {icon} <div className="font-bold text-xl mb-2">{title}</div> <p className="text-gray-700 text-base"> {description} </p> </div> </div> ); }; const Services = ({ services }) => { const serviceData = [ { icon: <Camera className="w-8 h-8 mb-4" />, title: "Designing for People", description: "We focus on ergonomic designs to ensure usability and comfort." }, { icon: <Edit3 className="w-8 h-8 mb-4" />, title: "Get Freelance Work", description: "Connect with companies and get freelance work matching your skills." } ]; return ( <div className="flex justify-between"> {serviceData.map((service, index) => ( <ServiceBox key={index} icon={service.icon} title={service.title} description={service.description} /> ))} </div> ); }; export default Services;