LogoLanding51

Cards: Header, Body, Footer

  • Same height and width for all cards on the same row.
  • The card width is specified with w-96 class. Or, you can use a percentage width like w-1/3. https://tailwindcss.com/docs/width#basic-example
  • The card body will take the remaining space between the header and the footer due to flex-1 class.
Live Demo
Card header 1
Card body
Card footer
Card header 2 Card header 2 Card header 2
Card body Card body Card body
Card footer Card footer Card footer
Card header 3 Card header 3 Card header 3 Card header 3 Card header 3
Card body Card body Card body Card body Card body Card body Card body Card body Card body Card body Card body Card body Card body Card body Card body
Card footer Card footer Card footer Card footer Card footer
Card header 4 Card header 4 Card header 4 Card header 4 Card header 4 Card header 4 Card header 4
Card body Card body Card body Card body Card body Card body Card body
Card footer Card footer Card footer Card footer Card footer Card footer Card footer
Card header 5 Card header 5 Card header 5 Card header 5 Card header 5 Card header 5 Card header 5 Card header 5 Card header 5
Card body Card body Card body Card body Card body Card body Card body Card body Card body
Card footer Card footer Card footer Card footer Card footer Card footer Card footer Card footer Card footer
Code: CardsHeaderBodyFooter.jsx
export default function CardsHeaderBodyFooter() {


    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-md">
                    <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>
    );
}

Cards: Image of left side, content on right side

  • The image is on the left side, and the content is on the right side.
  • Issue: I'm not able to find a way to stretch the image to fill the whole left side. object-fill does not work.
Live Demo
Card header 1
Card body 1
Card footer 1
Card header 2 Card header 2 Card header 2
Card body 2 Card body 2 Card body 2
Card footer 2 Card footer 2 Card footer 2
Card header 3 Card header 3 Card header 3 Card header 3 Card header 3
Card body 3 Card body 3 Card body 3 Card body 3 Card body 3 Card body 3 Card body 3 Card body 3 Card body 3 Card body 3 Card body 3 Card body 3 Card body 3 Card body 3 Card body 3
Card footer 3 Card footer 3 Card footer 3 Card footer 3 Card footer 3
Card header 4 Card header 4 Card header 4 Card header 4 Card header 4 Card header 4 Card header 4
Card body 4 Card body 4 Card body 4 Card body 4 Card body 4 Card body 4 Card body 4
Card footer 4 Card footer 4 Card footer 4 Card footer 4 Card footer 4 Card footer 4 Card footer 4
Card header 5 Card header 5 Card header 5 Card header 5 Card header 5 Card header 5 Card header 5 Card header 5 Card header 5
Card body 5 Card body 5 Card body 5 Card body 5 Card body 5 Card body 5 Card body 5 Card body 5 Card body 5
Card footer 5 Card footer 5 Card footer 5 Card footer 5 Card footer 5 Card footer 5 Card footer 5 Card footer 5 Card footer 5
Code: CardsImageLeft.jsx
export default function CardsImageLeft() {
    const cardsData = [
        { imgSrc: "https://placehold.co/200x200", header: "Card header 1 ".repeat(1), content: "Card body 1 ".repeat(1), footer: "Card footer 1 ".repeat(1) },
        { imgSrc: "https://placehold.co/250x250", header: "Card header 2 ".repeat(3), content: "Card body 2 ".repeat(3), footer: "Card footer 2 ".repeat(3) },
        { imgSrc: "https://placehold.co/160x400", header: "Card header 3 ".repeat(5), content: "Card body 3 ".repeat(15), footer: "Card footer 3 ".repeat(5) },
        { imgSrc: "https://placehold.co/600x400", header: "Card header 4 ".repeat(7), content: "Card body 4 ".repeat(7), footer: "Card footer 4 ".repeat(7) },
        { imgSrc: "https://placehold.co/222x466", header: "Card header 5 ".repeat(9), content: "Card body 5 ".repeat(9), footer: "Card footer 5 ".repeat(9) },
    ];


    return (
        <div className="flex flex-wrap justify-center gap-6">
            {cardsData.map((card, idx) => (
                <div key={idx} className="flex w-1/3 border rounded-lg shadow-md">
                    {/* Left side*/}
                    <div className="w-1/2 flex items-center justify-center bg-pink-100">
                        <img src={card.imgSrc} className="max-w-full h-auto object-cover" />
                    </div>


                    {/* Right side*/}
                    <div className="flex flex-col flex-1">
                        <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>
            ))}
        </div>
    );
}