Claim Details U I - Copy this React, Tailwind Component to your project

This-is-react-code-can-you-change-the-ui-design-for-this-code-"-<div-className="container-mx-auto-p-4">-<h2-className="text-3xl-font-semibold-text-center-mb-6">Questionnaire-and-Claim-Details</h2>-<div-className="grid-grid-cols-1-md:grid-cols-2-gap-6">-{/*-Questionnaire-Response-Section-*/}-{questionnaireResponse-&&-(-<div-className="card-bg-white-shadow-lg-rounded-lg-p-4">-<h3-className="text-2xl-font-semibold-mb-4">Questionnaire-Response</h3>-<div-className="card-content">-<p><strong-className="font-medium">ID:</strong>-{questionnaireResponse.id}</p>-<p><strong-className="font-medium">Status:</strong>-{questionnaireResponse.status}</p>-<p><strong-className="font-medium">Authored:</strong>-{questionnaireResponse.authored}</p>-<h4-className="font-semibold-mt-4">Questions-and-Answers:</h4>-<ul-className="list-disc-pl-5">-{questionnaireResponse.item.map((item)-=>-{-if-('linkId'-in-item)-{-return-(-<li-key={item.linkId}>-<strong>{item.text}:</strong>-{item.answer[0]?.valueBoolean-??-"Not-Answered"}-</li>-);-}-else-{-return-(-<li-key={item.sequence}>-<strong>{item.productOrService.text}:</strong>-</li>-);-}-})}-</ul>-</div>-</div>-)}-{/*-Claim-Details-Section-*/}-{claim-&&-(-<div-className="card-bg-white-shadow-lg-rounded-lg-p-4">-<h3-className="text-2xl-font-semibold-mb-4">Claim-Details</h3>-<div-className="card-content">-<p><strong-className="font-medium">ID:</strong>-{claim.id}</p>-<p><strong-className="font-medium">Status:</strong>-{claim.status}</p>-<p><strong-className="font-medium">Type:</strong>-{claim?.type?.coding[0]?.display}</p>-<p><strong-className="font-medium">Patient:</strong>-{claim?.patient?.reference}</p>-<h4-className="font-semibold-mt-4">Insurance:</h4>-<ul-className="list-disc-pl-5">-{claim?.insurance?.map((insurance,-index)-=>-(-<li-key={index}>-<strong>Coverage:</strong>-{insurance.coverage.display}-</li>-))}-</ul>-<h4-className="font-semibold-mt-4">Items:</h4>-<ul-className="list-disc-pl-5">-{claim.item.map((item)-=>-{-if-('productOrService'-in-item)-{-return-(-<li-key={item.sequence}>-<strong>Service:</strong>-{item.productOrService.text}<br-/>-<strong>Quantity:</strong>-{item.quantity.value}<br-/>-<strong>Price:</strong>-${item.unitPrice.value}-</li>-);-}-return-null;-})}-</ul>-</div>-</div>-)}-</div>-</div>"