Detail Coffees - Copy this React, Tailwind Component to your project

Import { useEffect, useState } from "react"; import { Link, useParams } from "react router dom"; function DetailCoffees() { const [data, setData] = useState({}); const { _id } = useParams(); useEffect(() => { const apiUrl = `http://localhost:4000/coffees/${_id}`; fetch(apiUrl) .then(res => res.json()) .then(res => { setData(res); }); }, [_id]); return ( <div className="bg gray 900 text white min h screen p 4 flex items center justify center"> <div className="max w sm rounded overflow hidden shadow lg bg gray 800"> <img className="w full" src={data.Coffee_Img} alt="Coffee Image" /> <div className="px 6 py 4"> <div className="font bold text xl mb 2">Coffee Details</div> <p className="text gray 400 text base"> Customer_id: {data.Customer_id || 'Loading...'} </p> <p className="text gray 400 text base"> Customer_Name: {data.Customer_Name || 'Loading...'} </p> <p className="text gray 400 text base"> Order_item: {data.Order_item || 'Loading...'} </p> <p className="text gray 400 text base"> No_Of_Item: {data.No_Of_Item || 'Loading...'} </p> <p className="text gray 400 text base"> Table_No: {data.Table_No || 'Loading...'} </p> <p className="text gray 400 text base"> Category: {data.Category || 'Loading...'} </p> </div> <div className="px 6 pt 4 pb 2"> <Link className="inline block bg blue 600 hover:bg blue 800 text white font bold py 2 px 4 rounded transition duration 300 ease in out mr 2 mb 2" to="/Coffees"> Back </Link> </div> </div> </div> ); } export default DetailCoffees; edit this code and buid more beautiful and atrective