Plan Details - Copy this React, Tailwind Component to your project

Make it beautifull and amazing <div className="border 2 border blue 500 max w [750px] mb 5 p 6 rounded xl bg gradient to r from blue 400 to blue 300 shadow lg"> <h2 className="text 3xl font bold text white mb 4"> User: {data?.planName || 'N/A'} </h2> <div className="text lg text white space y 2"> <p> <span className="font semibold">Description:</span>{' '} {data?.planDescription || 'N/A'} </p> <p> <span className="font semibold">Monthly Cost:</span>{' '} {data?.planMonthlyCost || 'N/A'} </p> <p> <span className="font semibold">Job Limit:</span>{' '} {data?.planJobLimit || 'N/A'} </p> <p> <span className="font semibold">Provider:</span>{' '} {data?.planProvider || 'N/A'} </p> <p> <span className="font semibold">Amount:</span>{' '} {data?.amount || 'N/A'} </p> <p> <span className="font semibold">Hourly Cost:</span>{' '} {data?.planHourlyCost || 'N/A'} </p> <p> <span className="font semibold">Hourly:</span>{' '} {data?.isHourly ? 'Yes' : 'No'} </p> <p> <span className="font semibold">Status:</span>{' '} {data?.status || 'N/A'} </p> </div> </div>