export default function CardsExample() {
const cardsData = [
{ header: "Card header 1 ".repeat(1), content: "Card body ".repeat(1), footer: "Card footer ".repeat(1) },
{ header: "Card header 2 ".repeat(3), content: "Card body ".repeat(3), footer: "Card footer ".repeat(3) },
{ header: "Card header 3 ".repeat(5), content: "Card body ".repeat(15), footer: "Card footer ".repeat(5) },
{ header: "Card header 4 ".repeat(7), content: "Card body ".repeat(7), footer: "Card footer ".repeat(7) },
{ header: "Card header 5 ".repeat(9), content: "Card body ".repeat(9), footer: "Card footer ".repeat(9) },
];
return (
<div className="flex flex-wrap justify-center gap-4">
{cardsData.map((card, idx) => (
<div key={idx} className="flex flex-col w-96 border rounded-lg shadow-lg">
<div className="px-4 py-2 bg-gray-100 font-semibold">
{card.header}
</div>
<div className="flex-1 p-4">
{card.content}
</div>
<div className="px-4 py-2 bg-gray-100 text-sm text-gray-600">
{card.footer}
</div>
</div>
))}
</div>
);
}