Card - Copy this React, Tailwind Component to your project

<Card> <div className="w full overflow x auto"> <Table className="whitespace nowrap min w max"> <TableHeader> <TableRow> <TableHead className="px 4 py 2 text left">Name</TableHead> <TableHead className="px 4 py 2 text left">Image</TableHead> <TableHead className="px 4 py 2 text left">Age</TableHead> <TableHead className="px 4 py 2 text left">Bed</TableHead> <TableHead className="px 4 py 2 text center">#</TableHead> </TableRow> </TableHeader> <TableBody> {patients .slice() .reverse() .map((item, index) => ( <TableRow key={index} className="border t"> <TableCell className="px 4 py 2">{item?.name}</TableCell> <TableCell className="px 4 py 2"> <div className="flex flex wrap space x 2"> {item?.ecgImage?.map((imageUrl, imgIndex) => ( <div key={imgIndex} onClick={() => openModal(imageUrl)} className="cursor pointer" > <Image src={imageUrl} alt={`Image ${imgIndex + 1}`} width={100} height={100} className="rounded lg border border gray 200 w 24 h 16 object cover" /> </div> ))} </div> </TableCell> <TableCell className="px 4 py 2">{item?.age} Y</TableCell> <TableCell className="px 4 py 2"> {item?.ward} {item?.bed} </TableCell> <TableCell className="px 4 py 2 text center"> <div className="flex justify center items center space x 2"> <Link href={`/ccu/show/${item._id}`}> <Button variant="outline" className="px 2 py 2"> <TbListDetails /> </Button> </Link> <Button variant="outline" onClick={() => patientDelete(item._id)} > <FaTrash /> </Button> </div> </TableCell> </TableRow> ))} </TableBody> </Table> </div> </Card>