Checkout Form - Copy this React, Tailwind Component to your project

{visible && selectedOrder && ( <div className="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full" onClick={() => setVisible(false)}> <div className="relative top-20 mx-auto p-5 border w-11/12 md:w-3/4 lg:w-1/2 shadow-lg rounded-md bg-white" onClick={(e) => e.stopPropagation()}> <div className="mt-3 text-center"> <h3 className="text-lg leading-6 font-medium text-gray-900">Order Details</h3> <div className="mt-2 px-7 py-3"> <div className="text-left"> <h4 className="font-bold">Customer Details</h4> <p>Name: {selectedOrder.deliveryDetails.name}</p> <p>Company: {selectedOrder.deliveryDetails.company}</p> <p>Email: {selectedOrder.deliveryDetails.email}</p> <p>Phone: {selectedOrder.deliveryDetails.phone}</p> <p>Address: {`${selectedOrder.deliveryDetails.street1}, ${selectedOrder.deliveryDetails.street2}, ${selectedOrder.deliveryDetails.city}, ${selectedOrder.deliveryDetails.state}, ${selectedOrder.deliveryDetails.zip}, ${selectedOrder.deliveryDetails.country}`}</p> </div> <div className="mt-4 text-left"> <h4 className="font-bold">Order Summary</h4> <p>Total Amount: ${selectedOrder.amount}</p> <p>Status: {selectedOrder.status}</p> <p>Payment Method: {selectedOrder.paymentMethod}</p> </div> <div className="mt-4"> <h4 className="font-bold text-left">Products</h4> <div className="overflow-x-auto"> <table className="min-w-full divide-y divide-gray-200"> <thead className="bg-gray-50"> <tr> {productColumns.map((column) => ( <th key={column.key} className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider" > {column.title} </th> ))} </tr> </thead> <tbody className="bg-white divide-y divide-gray-200"> {selectedOrder.products.map((product, index) => ( <tr key={index}> <td className="px-6 py-4 whitespace-nowrap">{product.productDetails.name}</td> <td className="px-6 py-4 whitespace-nowrap"> <img src={`${base_url}/${product.productDetails.images[0]}`} alt="Product" className="w-16 h-16 object-cover" /> </td> <td className="px-6 py-4 whitespace-nowrap">${product.productDetails.price}</td> <td className="px-6 py-4 whitespace-nowrap">{product.quantity}</td> {/* <td className="px-6 py-4 whitespace-nowrap"> <div className="w-8 h-8 rounded-full" style={{ backgroundColor: product.color }}></div> </td> */} </tr> ))} </tbody> </table> </div> </div> </div> <div className="items-center px-4 py-3"> <button onClick={() => setVisible(false)} className="px-4 py-2 bg-blue-500 text-white text-base font-medium rounded-md w-full shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-300" > Close </button> </div> </div> </div> </div> )}