About Me Page - Copy this Html, Tailwind Component to your project

Import React from "react"; import { FaCode, FaDesktop, FaMobile, FaServer } from "react icons/fa"; const AboutMe = () => { const services = [ { id: 1, title: "Web Development", description: "Building responsive and scalable web applications using modern technologies", icon: <FaCode className="text 4xl mb 4 text blue 500" />, image: "https://images.unsplash.com/photo 1498050108023 c5249f4df085" }, { id: 2, title: "UI/UX Design", description: "Creating intuitive and engaging user interfaces with modern design principles", icon: <FaDesktop className="text 4xl mb 4 text blue 500" />, image: "https://images.unsplash.com/photo 1507238691740 187a5b1d37b8" }, { id: 3, title: "Mobile Development", description: "Developing cross platform mobile applications for iOS and Android", icon: <FaMobile className="text 4xl mb 4 text blue 500" />, image: "https://images.unsplash.com/photo 1512941937669 90a1b58e7e9c" }, { id: 4, title: "Backend Development", description: "Building robust and secure server side applications and APIs", icon: <FaServer className="text 4xl mb 4 text blue 500" />, image: "https://images.unsplash.com/photo 1558494949 ef010cbdcc31" } ]; return ( <div className="min h screen bg gray 50"> {/* Header */} <header className="bg gradient to r from blue 500 to purple 600 py 6"> <h1 className="text 4xl font bold text center text white">About Me</h1> </header> {/* Navigation */} <nav className="bg white shadow md"> <div className="container mx auto px 6 py 4"> <div className="flex justify center space x 8"> <a href="#" className="text blue 600 hover:text blue 800 font medium">About</a> <a href="#" className="text gray 600 hover:text blue 600 font medium">Services</a> <a href="#" className="text gray 600 hover:text blue 600 font medium">Contact</a> </div> </div> </nav> {/* Hero Section */} <section className="py 20 bg white"> <div className="container mx auto px 6 text center"> <img src="https://images.unsplash.com/photo 1472099645785 5658abf4ff4e" alt="Profile" className="w 32 h 32 rounded full mx auto mb 8 object cover shadow lg" /> <h2 className="text 5xl font bold text gray 800 mb 4">Hello, I'm Robert Fox</h2> <p className="text xl text gray 600 max w 2xl mx auto"> A passionate developer specialized in creating beautiful and functional web applications. With over 5 years of experience in the industry, I help businesses bring their ideas to life. </p> </div> </section> {/* Services Section */} <section className="py 20 bg gray 50"> <div className="container mx auto px 6"> <h2 className="text 3xl font bold text center text gray 800 mb 12">My Services</h2> <div className="grid grid cols 1 md:grid cols 2 lg:grid cols 4 gap 8"> {services.map((service) => ( <div key={service.id} className="bg white rounded lg shadow lg overflow hidden hover:shadow xl transition shadow duration 300" > <img src={service.image} alt={service.title} className="w full h 48 object cover" /> <div className="p 6"> <div className="flex justify center">{service.icon}</div> <h3 className="text xl font bold text gray 800 mb 2 text center">{service.title}</h3> <p className="text gray 600 text center">{service.description}</p> </div> </div> ))} </div> </div> </section> {/* Footer */} <footer className="bg gradient to r from blue 500 to purple 600 py 8"> <div className="container mx auto px 6 text center"> <p className="text white"> © {new Date().getFullYear()} Robert Fox. All rights reserved. <a href="#" className="ml 2 underline hover:text blue 200">Privacy Policy</a> </p> </div> </footer> </div> ); }; export default AboutMe; Convert this code to HTML