Card

A Tailwind CSS card component for grouping content. See more card examples.

Sizes

Card content comes in three sizes for different use cases.

Variants

Cards come in two variants for different contexts.

Payment Method

Visa ending in 4242

Edit

Quick Tip

Press ⌘K to open search

<div class="grid gap-6 w-full max-w-sm">
  <div class="card">
    <div class="card-content card-content-sm flex items-center gap-4">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-5 text-muted-foreground"><rect width="20" height="14" x="2" y="5" rx="2"/><line x1="2" x2="22" y1="10" y2="10"/></svg>
      <div class="flex-1 grid gap-1">
        <h3 class="font-semibold text-sm leading-none">Payment Method</h3>
        <p class="text-muted-foreground text-sm">Visa ending in 4242</p>
      </div>
      <a href="#" class="btn btn-ghost btn-sm">Edit</a>
    </div>
  </div>
  <div class="card card-muted">
    <div class="card-content card-content-sm flex items-center gap-4">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-5 text-muted-foreground"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
      <div class="flex-1 grid gap-1">
        <h3 class="font-semibold text-sm leading-none">Quick Tip</h3>
        <p class="text-muted-foreground text-sm">Press ⌘K to open search</p>
      </div>
    </div>
  </div>
</div>

Customization

You can combine card classes with Tailwind utilities for custom styling.

Limited

Early Access

Be among the first to try our new AI-powered features.

<div
  class="card bg-linear-to-br from-pink-500 via-purple-500 to-indigo-500 border-0 text-white w-full max-w-sm shadow-xl"
>
  <div class="card-content grid gap-6">
    <div class="flex items-center justify-between">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-6"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"/><path d="M20 2v4"/><path d="M22 4h-4"/><circle cx="4" cy="20" r="2"/></svg>
      <span class="text-xs font-medium bg-white/20 px-2 py-1 rounded-full">
        Limited
      </span>
    </div>
    <div class="grid gap-2">
      <h3 class="font-semibold text-xl">Early Access</h3>
      <p class="text-white/80 text-sm">
        Be among the first to try our new AI-powered features.
      </p>
    </div>
    <button class="btn bg-white text-purple-600 hover:bg-white/90 border-0">
      Join Waitlist
    </button>
  </div>
</div>

How it works

The card component is a CSS-only component for grouping related content. It includes variant and size classes for different visual styles and padding options.

Structure

A card consists of a container and content sections:

<div class="card">
  <div class="card-content">
    <h3>Title</h3>
    <p>Content goes here.</p>
  </div>
</div>

Cards can include images or other elements alongside content:

<div class="card">
  <img src="..." alt="..." class="rounded-t-card" />
  <div class="card-content">...</div>
</div>

Class reference

All available classes for the card component.

Class	Description
`card`	Add to container element for base card styles with rounded corners
`card-default`	Add to `.card` for border style (default)
`card-muted`	Add to `.card` for muted background, no border
`card-content`	Add to inner element for content section with padding
`card-content-sm`	Add to `.card-content` for small padding
`card-content-base`	Add to `.card-content` for base padding (default)
`card-content-lg`	Add to `.card-content` for large padding

<div class="card card-muted">
  <div class="card-content card-content-sm">...</div>
</div>

How to use