Shipping Rate Page - Copy this React, Tailwind Component to your project

Import React from "react"; import { useNavigate, useLocation } from "react router dom"; import './ShippingRatePage.css'; const baseUrl = process.env.REACT_APP_API_URL; const ShippingRatePage = () => { const navigate = useNavigate(); const { state } = useLocation(); const { shippingRate, formData } = state || {}; if (!shippingRate || !formData) { return <p>No shipping rate data available. Please try again.</p>; } const { baseRate, additionalCharges, totalCharges } = shippingRate; sessionStorage.setItem('shippingRate', JSON.stringify({ baseRate, additionalCharges, totalCharges })); const handleProceedToOrder = () => { navigate('/place order', { state: { shippingRate, // Pass entire shipping rate object formData, // Pass form data fromShippingPage: true } }); }; return ( <div className="shipping rate container"> <h2>Shipping Rate Details</h2> <div className="rate detail"> <h3>Base Rate</h3> <p>₹ {baseRate}</p> </div> <div className="rate detail"> <h3>Additional Charges Breakdown</h3> <table> <thead> <tr> <th>Charge Type</th> <th>Amount (₹)</th> </tr> </thead> <tbody> {additionalCharges.chargeDetails.map((charge, index) => ( <tr key={index}> <td>{charge.chargeType}</td> <td>{charge.amount}</td> </tr> ))} </tbody> </table> </div> <div className="rate detail"> <h3>Total Charges</h3> <p>₹ {totalCharges}</p> </div> <div className="button group"> <button onClick={() => window.history.back()}>Go Back</button> <button onClick={handleProceedToOrder}>Proceed to Order</button> </div> </div> ); }; export default ShippingRatePage; give me some alignemnt for this page so that it simply wont look like table and it should look effectively