Card

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

Sign Up

Create an account to get started on the platform and unlock all features and benefits.

Or continue with 
<div class="card w-full max-w-sm">
  <div class="card-content grid gap-6">
    <div class="grid gap-2">
      <h3 class="text-lg/6 font-semibold flex items-center gap-1.5">Sign Up</h3>
      <p class="text-sm/6 text-muted-foreground">
        Create an account to get started on the platform and unlock all features
        and benefits.
      </p>
    </div>
    <div class="grid grid-cols-2 gap-4">
      <button class="btn btn-outline" type="button">
        <svg viewBox="0 0 24 24">
          <path
            d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
            fill="#4285F4"
          ></path>
          <path
            d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
            fill="#34A853"
          ></path>
          <path
            d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
            fill="#FBBC05"
          ></path>
          <path
            d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
            fill="#EA4335"
          ></path>
        </svg>
        Google
      </button>
      <button class="btn btn-outline" type="button">
        <svg fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path
            fill-rule="evenodd"
            d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
            clip-rule="evenodd"
          ></path>
        </svg>
        GitHub
      </button>
    </div>
    <div class="relative">
      <div class="absolute inset-0 flex items-center">
        <span class="w-full border-t"></span>
      </div>
      <div class="relative flex justify-center text-xs uppercase">
        <span class="bg-card px-2 text-muted-foreground">Or continue with</span>
      </div>
    </div>
    <div class="grid gap-6">
      <div class="grid gap-3">
        <div class="flex items-center justify-between">
          <label class="label" for="email">Email</label>
        </div>
        <input
          id="email"
          class="input"
          type="email"
          placeholder="m@example.com"
        />
      </div>
      <div class="grid gap-3">
        <div class="flex items-center justify-between">
          <label class="label" for="password">Password</label>
        </div>
        <input id="password" class="input" type="password" />
      </div>
      <button class="btn" type="submit">Create Account</button>
    </div>
  </div>
</div>

Sizes

Card content comes in three sizes for different use cases.

Payment Method

Visa ending in 4242

Edit
Product
Furniture

Classic Wooden Chair

Handcrafted solid oak chair with ergonomic design and natural finish.

(128)
$149 $199

Premium Plan

Everything you need to scale

$29 /month
  • Up to 10 team members
  • 50GB cloud storage
  • Priority email support
  • Advanced analytics dashboard
  • API access 
<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"></rect><line x1="2" x2="22" y1="10" y2="10"></line></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">
    <img
      src="https://images.pexels.com/photos/11112728/pexels-photo-11112728.jpeg?auto=compress&cs=tinysrgb&w=600"
      alt="Product"
      class="aspect-square object-cover rounded-t-xl"
    />
    <div class="card-content grid gap-6">
      <div class="grid gap-2">
        <span
          class="flex items-center gap-1.5 text-xs/5 font-medium text-muted-foreground"
          ><a href="#">Furniture</a></span
        >
        <h3 class="text-lg/6 font-semibold flex items-center gap-1.5">
          Classic Wooden Chair
        </h3>
        <p class="text-sm/6 text-muted-foreground">
          Handcrafted solid oak chair with ergonomic design and natural finish.
        </p>
      </div>
      <div class="flex items-center gap-2">
        <div class="flex gap-1">
          <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-4 text-primary fill-primary"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg>
          <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-4 text-primary fill-primary"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg>
          <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-4 text-primary fill-primary"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg>
          <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-4 text-primary fill-primary"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg>
          <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-4 text-muted fill-muted"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg>
        </div>
        <span class="text-sm text-muted-foreground">(128)</span>
      </div>
      <div class="flex items-center justify-between">
        <div class="flex items-baseline gap-2">
          <span class="text-lg font-bold">$149</span>
          <span class="text-sm text-muted-foreground line-through">$199</span>
        </div>
        <button class="btn btn-sm">Add to Cart</button>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-content sm:card-content-lg grid gap-6">
      <div class="grid gap-2">
        <h3 class="text-lg/6 font-semibold flex items-center gap-1.5">
          Premium Plan
        </h3>
        <p class="text-sm/6 text-muted-foreground">
          Everything you need to scale
        </p>
      </div>
      <div class="flex items-baseline gap-1">
        <span class="text-4xl font-bold">$29</span>
        <span class="text-muted-foreground">/month</span>
      </div>
      <ul class="grid gap-4 text-sm">
        <li class="flex items-center gap-2">
          <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-4 text-primary"><path d="M20 6 9 17l-5-5"></path></svg>
          Up to 10 team members
        </li>
        <li class="flex items-center gap-2">
          <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-4 text-primary"><path d="M20 6 9 17l-5-5"></path></svg>
          50GB cloud storage
        </li>
        <li class="flex items-center gap-2">
          <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-4 text-primary"><path d="M20 6 9 17l-5-5"></path></svg>
          Priority email support
        </li>
        <li class="flex items-center gap-2">
          <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-4 text-primary"><path d="M20 6 9 17l-5-5"></path></svg>
          Advanced analytics dashboard
        </li>
        <li class="flex items-center gap-2">
          <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-4 text-primary"><path d="M20 6 9 17l-5-5"></path></svg>
          API access
        </li>
      </ul>
      <button class="btn">Buy Now</button>
    </div>
  </div>
</div>

Variants

Cards come in three variants for different contexts.

Payment Method

Visa ending in 4242

Edit

Email Notifications

Receive updates via email

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"></rect><line x1="2" x2="22" y1="10" y2="10"></line></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-outline">
    <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"><path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"></path><rect x="2" y="4" width="20" height="16" rx="2"></rect></svg>
      <div class="flex-1 grid gap-1">
        <h3 class="font-semibold text-sm leading-none">Email Notifications</h3>
        <p class="text-muted-foreground text-sm">Receive updates via email</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"></circle><path d="M12 16v-4"></path><path d="M12 8h.01"></path></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><path d="M20 2v4"></path><path d="M22 4h-4"></path><circle cx="4" cy="20" r="2"></circle></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-xl" />
  <div class="card-content">...</div>
</div>

Class reference

All available classes for the card component.

ClassDescription
cardAdd to container element for base card styles with rounded corners
card-defaultAdd to .card for border and shadow style (default)
card-outlineAdd to .card for border only, no shadow
card-mutedAdd to .card for muted background, no border or shadow
card-contentAdd to inner element for content section with padding
card-content-smAdd to .card-content for small padding
card-content-baseAdd to .card-content for base padding (default)
card-content-lgAdd to .card-content for large padding
<div class="card card-outline">
  <div class="card-content card-content-sm">...</div>
</div>