Card

A Tailwind CSS card component for grouping content.

Welcome Back

Enter your credentials to continue.

Forgot password?
Sign up for new account 
<div class="card w-full max-w-sm">
  <form class="card-content grid gap-8">
    <div class="grid gap-2">
      <h3 class="font-semibold leading-none">Welcome Back</h3>
      <p class="text-muted-foreground text-sm">
        Enter your credentials to continue.
      </p>
    </div>
    <div class="grid gap-6">
      <div class="grid gap-3">
        <label class="label" for="email">Email</label>
        <input
          class="input"
          type="email"
          id="email"
          placeholder="you@example.com"
        />
      </div>
      <div class="grid gap-3">
        <div class="flex items-center justify-between">
          <label class="label" for="password">Password</label>
          <a
            href="#"
            class="text-sm font-medium text-muted-foreground hover:underline underline-offset-4"
            >Forgot password?</a
          >
        </div>
        <input
          class="input"
          type="password"
          id="password"
          placeholder="Enter password"
        />
      </div>
    </div>
    <div class="grid gap-3">
      <button class="btn">Sign In</button>
      <a href="#" class="btn btn-ghost">Sign up for new account</a>
    </div>
  </form>
</div>

Sizes

Card content comes in three sizes for different use cases.

Payment Method

Visa ending in 4242

Edit
Leather handbag

Leather Handbag

Premium Italian leather

$48.00

Pro Plan

Everything you need to grow.

$29 per month
  • Unlimited projects
  • Priority support
  • Advanced analytics 
<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/26954381/pexels-photo-26954381.jpeg?auto=compress&cs=tinysrgb&w=600"
      alt="Leather handbag"
      class="aspect-square object-cover rounded-t-xl"
    />
    <div class="card-content grid gap-4">
      <div class="grid gap-2">
        <h3 class="font-semibold leading-none">Leather Handbag</h3>
        <p class="text-muted-foreground text-sm">Premium Italian leather</p>
      </div>
      <div class="flex items-center justify-between">
        <span class="font-semibold">$48.00</span>
        <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-8">
      <div class="grid gap-3">
        <h3 class="font-semibold text-xl leading-none">Pro Plan</h3>
        <p class="text-muted-foreground text-sm">
          Everything you need to grow.
        </p>
      </div>
      <div class="grid gap-2">
        <span class="text-4xl font-bold">$29</span>
        <span class="text-muted-foreground text-sm">per month</span>
      </div>
      <ul class="grid gap-3 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-green-500"><path d="M20 6 9 17l-5-5"></path></svg>
          Unlimited projects
        </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-green-500"><path d="M20 6 9 17l-5-5"></path></svg>
          Priority 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-green-500"><path d="M20 6 9 17l-5-5"></path></svg>
          Advanced analytics
        </li>
      </ul>
      <button class="btn btn-lg">Purchase Plan</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>