Tailwind CSS Card Variants: Product Cards, Info Cards and More

1. The Core Principle of Tailwind CSS Card Architecture

A Tailwind CSS card is more than a white rectangle with a shadow. In the context of a complete card system, it is a structured composition unit with a clear slot architecture: header (optional), body (required), footer (optional). Anyone who maintains this separation from the start can combine variants flexibly without implementing every combination separately. The core principle is: the card shell defines border, shadow and radius; the slots define padding and layout; the variant chooses color, background and interactivity.

In Tailwind projects without this system, you often see every template file with its own interpretation of a card, sometimes with shadow-md, sometimes with shadow-lg, sometimes with border, sometimes without. That is not just visually inconsistent, it also turns global design changes into a nightmare. A central Tailwind CSS card definition inside the @layer components block, or in a dedicated cards.css file, solves this problem. All variants inherit from this base and can be updated in a single step when the design changes.

2. The Base Card: Structure and Shared Classes

The base Tailwind CSS card defines the container: bg-white rounded-2xl overflow-hidden shadow-sm border border-slate-200. Why overflow-hidden? So that rounded corners clip correctly, without this property images and colored background blocks would break out over the edge of the card. rounded-2xl is the standard radius in modern card design; it is large enough to feel soft, but not as extreme as rounded-3xl, which looks out of place on small cards. The subtle border border border-slate-200 gives cards on a white page background a visible boundary without a heavy shadow.

Card body and card header are structured as separate div elements with their own padding: .card-body { @apply p-5 sm:p-6; }, .card-header { @apply px-5 pt-5 sm:px-6 sm:pt-6; }. This separation allows an image used as a card header to reach right to the edge of the card without padding, while the text content below gets correct padding. The card footer receives border-t border-slate-100 and a light top padding to visually separate it from the body. With these three slots, all common Tailwind CSS card variants can be built.

/* cards.css - Card component system */
@layer components {
  .card {
    @apply bg-white rounded-2xl overflow-hidden;
    @apply border border-slate-200 shadow-sm;
    @apply flex flex-col;
  }

  .card-header {
    @apply relative overflow-hidden;
  }

  .card-body {
    @apply p-5 sm:p-6 flex-1;
  }

  .card-footer {
    @apply px-5 pb-5 sm:px-6 sm:pb-6;
    @apply pt-4 border-t border-slate-100;
    @apply flex items-center gap-3;
  }

  /* Hover variant - adds lift and pointer cursor */
  .card-interactive {
    @apply transition-all duration-200 cursor-pointer;
    @apply hover:shadow-lg hover:-translate-y-0.5;
    @apply focus-within:ring-2 focus-within:ring-sky-500 focus-within:ring-offset-2;
  }
}

3. The Product Card with Image, Price and CTA

The product card is the most common Tailwind CSS card variant in e-commerce projects like Hyva on Magento 2. It has a clear vertical structure: product image on top, title, short description and price in the middle, CTA button at the bottom. The challenge is the product image: it should always occupy the same space in the card, regardless of the original image's aspect ratio. The solution in Tailwind: aspect-square or aspect-[4/3] on a container div, combined with object-cover on the img tag. This way the image is always cropped, never stretched.

The price in a product card needs typographic hierarchy: a large, bold price in an accent color (text-2xl font-bold text-sky-700), next to it a smaller, struck-through text for the recommended retail price (text-sm text-slate-400 line-through). The spacing between price and CTA button is critical, too little and the button looks cramped, too much and the card grows unevenly when product titles differ in length. The solution: a flex-column layout on the card body with justify-between, which positions the price at the top and the button at the bottom, regardless of the number of title lines.