Delivery Timeline - Copy this React, Tailwind Component to your project

Import React, { useEffect, useState } from "react"; // import { FaBox, FaTruck, FaShippingFast, FaHome } from "react icons/fa"; const Timeline = () => { const [animate, setAnimate] = useState(false); useEffect(() => { setAnimate(true); }, []); const steps = [ { label: "Ordered", date: "17 Oct, 2024" }, { label: "Shipped", date: "17 Oct, 2024" }, { label: "Out For Delivery", date: "19 Oct, 2024" }, { label: "Delivered", date: "20 Oct, 2024" } ]; return ( <div className="flex justify center items center min h screen bg gray 100 p 4"> <div className="bg white p 8 rounded xl shadow 2xl w full max w md"> <h2 className="text 2xl font bold text center mb 6 text blue 600">Delivery Timeline</h2> <div className="relative"> {steps.map((step, index) => ( <div key={index} className="flex items center mb 8 last:mb 0"> <div className={`w 10 h 10 rounded full flex items center justify center transition colors duration 500 ease in out`} style={{ transitionDelay: `${index * 300}ms` }}> { step.label != "Cancelled" ? <img src="/assets/icons/Timeline_cancelled.svg" alt="empty" /> : animate ? <img src="/assets/icons/Timeline_tick.svg" alt="empty" /> : <img src="/assets/icons/Timeline_empty.svg" alt="empty" /> } </div> <div className="ml 4 flex grow"> <p className="font semibold text lg">{step.label}</p> <p className="text sm text gray 500">{step.date}</p> </div> {index < steps.length 1 && ( <div className={`absolute left 5 w 0.5 bg blue 200 ${animate ? 'h 16' : 'h 0'} transition all duration 500 ease in out`} style={{ top: `${index * 96 + 40}px`, transitionDelay: `${index * 300 + 150}ms` }}></div> )} </div> ))} </div> <div className="mt 8 text center bg blue 50 p 4 rounded lg"> <p className="text gray 600">Estimated Delivery by</p> <p className="font bold text xl text blue 600">20 Oct, 2024</p> </div> </div> </div> ); }; export default Timeline; make this pretty timeline and make it green