Investor Portfolio Card - Copy this React, Tailwind Component to your project

Make these cards similar so the card design is consistent <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-7 mt-12"> <Card className="col-span-4 bg-white shadow-lg hover:shadow-xl transition-all duration-300"> <CardHeader> <CardTitle className="text-2xl font-semibold text-teal-800"> Portfolio Overview </CardTitle> </CardHeader> <CardContent> <div className="space-y-6"> {[ { name: "Technology", allocation: 40, color: "bg-blue-500" }, { name: "Real Estate", allocation: 30, color: "bg-green-500", }, { name: "Energy", allocation: 20, color: "bg-yellow-500" }, { name: "Healthcare", allocation: 10, color: "bg-purple-500", }, ].map((item) => ( <div className="space-y-2" key={item.name}> <div className="flex items-center justify-between"> <p className="text-sm font-medium text-teal-700"> {item.name} </p> <p className="text-sm font-semibold text-teal-900"> SAR {((45231.89 * item.allocation) / 100).toFixed(2)} </p> </div> <div className="w-full bg-teal-100 rounded-full h-2.5"> <div className={`h-2.5 rounded-full ${item.color}`} style={{ width: `${item.allocation}%` }} ></div> </div> <p className="text-xs text-teal-600 text-right"> {item.allocation}% </p> </div> ))} </div> </CardContent> </Card>