hacer una card mas elegante con tailwind

import React from "react";
import Dialog from "@mui/material/Dialog";
import DialogTitle from "@mui/material/DialogTitle";
import DialogContent from "@mui/material/DialogContent";
import DialogActions from "@mui/material/DialogActions";
import Button from "@mui/material/Button";
import { useSelector, useDispatch } from "react-redux";
import { closePaymentModal } from "@/slices/paymentsSlice";

const PaymentDetailsModal = () => {
const dispatch = useDispatch();
const open = useSelector((state) => state.payments.paymentModalOpen);
const payment = useSelector((state) => state.payments.selectedPayment);
if (!payment) return null;
return (
<Dialog open={open} onClose={() => dispatch(closePaymentModal())} maxWidth="sm" fullWidth>
<DialogTitle>Detalles del Pago</DialogTitle>
<DialogContent dividers>
<div>
<b>ID:</b> {payment.id || payment.guid}
</div>
<div>
<b>Cliente:</b> {payment.customerName || payment.name}
</div>
<div>
<b>Email:</b> {payment.customerEmail}
</div>
<div>
<b>Monto:</b> {payment.amount}
</div>
<div>
<b>Fecha de vencimiento:</b> {payment.dueDate || payment.date}
</div>
<div>
<b>Estado:</b> {payment.status}
</div>
</DialogContent>
<DialogActions>
<Button onClick={() => dispatch(closePaymentModal())} color="primary">
Cerrar
</Button>
</DialogActions>
</Dialog>
);
};

export default PaymentDetailsModal;