Tailwind CSS Card Examples
A growing collection of card examples for Tailwind CSS. Copy and paste the HTML into your project and adjust it with utility classes.
Product Card
A product card for Tailwind CSS. Use it in shop pages and catalog grids to present an item and let people add it to the cart.
<div class="card relative w-full max-w-sm">
<img
src="https://images.pexels.com/photos/7607334/pexels-photo-7607334.jpeg?auto=compress&cs=tinysrgb&w=768&h=512&fit=crop"
alt="Oak console table with a marble top and an open drawer"
class="aspect-3/2 w-full object-cover"
/><span class="badge absolute top-3 start-3">Sale</span
><button
type="button"
class="btn btn-ghost btn-sm btn-icon absolute top-3 end-3 rounded-full bg-background shadow-xs"
aria-label="Add to wishlist"
>
<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"
>
<path
d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"
></path>
</svg>
</button>
<div class="card-header">
<span class="text-xs font-medium tracking-tight text-muted-foreground"
>Furniture</span
>
<h3 class="card-title">Marble Top Console Table</h3>
<p class="card-description">
Solid oak console with a honed Carrara marble top and a soft close drawer
for hallways and entries.
</p>
</div>
<div class="card-content flex items-center gap-2">
<div class="flex gap-1">
<svg
class="size-4.5 text-primary"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 15 15"
fill="none"
>
<path
d="M7.22303 0.665992C7.32551 0.419604 7.67454 0.419604 7.77702 0.665992L9.41343 4.60039C9.45663 4.70426 9.55432 4.77523 9.66645 4.78422L13.914 5.12475C14.18 5.14607 14.2878 5.47802 14.0852 5.65162L10.849 8.42374C10.7636 8.49692 10.7263 8.61176 10.7524 8.72118L11.7411 12.866C11.803 13.1256 11.5206 13.3308 11.2929 13.1917L7.6564 10.9705C7.5604 10.9119 7.43965 10.9119 7.34365 10.9705L3.70718 13.1917C3.47945 13.3308 3.19708 13.1256 3.25899 12.866L4.24769 8.72118C4.2738 8.61176 4.23648 8.49692 4.15105 8.42374L0.914889 5.65162C0.712228 5.47802 0.820086 5.14607 1.08608 5.12475L5.3336 4.78422C5.44573 4.77523 5.54342 4.70426 5.58662 4.60039L7.22303 0.665992Z"
fill="currentColor"
></path></svg
><svg
class="size-4.5 text-primary"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 15 15"
fill="none"
>
<path
d="M7.22303 0.665992C7.32551 0.419604 7.67454 0.419604 7.77702 0.665992L9.41343 4.60039C9.45663 4.70426 9.55432 4.77523 9.66645 4.78422L13.914 5.12475C14.18 5.14607 14.2878 5.47802 14.0852 5.65162L10.849 8.42374C10.7636 8.49692 10.7263 8.61176 10.7524 8.72118L11.7411 12.866C11.803 13.1256 11.5206 13.3308 11.2929 13.1917L7.6564 10.9705C7.5604 10.9119 7.43965 10.9119 7.34365 10.9705L3.70718 13.1917C3.47945 13.3308 3.19708 13.1256 3.25899 12.866L4.24769 8.72118C4.2738 8.61176 4.23648 8.49692 4.15105 8.42374L0.914889 5.65162C0.712228 5.47802 0.820086 5.14607 1.08608 5.12475L5.3336 4.78422C5.44573 4.77523 5.54342 4.70426 5.58662 4.60039L7.22303 0.665992Z"
fill="currentColor"
></path></svg
><svg
class="size-4.5 text-primary"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 15 15"
fill="none"
>
<path
d="M7.22303 0.665992C7.32551 0.419604 7.67454 0.419604 7.77702 0.665992L9.41343 4.60039C9.45663 4.70426 9.55432 4.77523 9.66645 4.78422L13.914 5.12475C14.18 5.14607 14.2878 5.47802 14.0852 5.65162L10.849 8.42374C10.7636 8.49692 10.7263 8.61176 10.7524 8.72118L11.7411 12.866C11.803 13.1256 11.5206 13.3308 11.2929 13.1917L7.6564 10.9705C7.5604 10.9119 7.43965 10.9119 7.34365 10.9705L3.70718 13.1917C3.47945 13.3308 3.19708 13.1256 3.25899 12.866L4.24769 8.72118C4.2738 8.61176 4.23648 8.49692 4.15105 8.42374L0.914889 5.65162C0.712228 5.47802 0.820086 5.14607 1.08608 5.12475L5.3336 4.78422C5.44573 4.77523 5.54342 4.70426 5.58662 4.60039L7.22303 0.665992Z"
fill="currentColor"
></path></svg
><svg
class="size-4.5 text-primary"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 15 15"
fill="none"
>
<path
d="M7.22303 0.665992C7.32551 0.419604 7.67454 0.419604 7.77702 0.665992L9.41343 4.60039C9.45663 4.70426 9.55432 4.77523 9.66645 4.78422L13.914 5.12475C14.18 5.14607 14.2878 5.47802 14.0852 5.65162L10.849 8.42374C10.7636 8.49692 10.7263 8.61176 10.7524 8.72118L11.7411 12.866C11.803 13.1256 11.5206 13.3308 11.2929 13.1917L7.6564 10.9705C7.5604 10.9119 7.43965 10.9119 7.34365 10.9705L3.70718 13.1917C3.47945 13.3308 3.19708 13.1256 3.25899 12.866L4.24769 8.72118C4.2738 8.61176 4.23648 8.49692 4.15105 8.42374L0.914889 5.65162C0.712228 5.47802 0.820086 5.14607 1.08608 5.12475L5.3336 4.78422C5.44573 4.77523 5.54342 4.70426 5.58662 4.60039L7.22303 0.665992Z"
fill="currentColor"
></path></svg
><svg
class="size-4.5 text-muted"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 15 15"
fill="none"
>
<path
d="M7.22303 0.665992C7.32551 0.419604 7.67454 0.419604 7.77702 0.665992L9.41343 4.60039C9.45663 4.70426 9.55432 4.77523 9.66645 4.78422L13.914 5.12475C14.18 5.14607 14.2878 5.47802 14.0852 5.65162L10.849 8.42374C10.7636 8.49692 10.7263 8.61176 10.7524 8.72118L11.7411 12.866C11.803 13.1256 11.5206 13.3308 11.2929 13.1917L7.6564 10.9705C7.5604 10.9119 7.43965 10.9119 7.34365 10.9705L3.70718 13.1917C3.47945 13.3308 3.19708 13.1256 3.25899 12.866L4.24769 8.72118C4.2738 8.61176 4.23648 8.49692 4.15105 8.42374L0.914889 5.65162C0.712228 5.47802 0.820086 5.14607 1.08608 5.12475L5.3336 4.78422C5.44573 4.77523 5.54342 4.70426 5.58662 4.60039L7.22303 0.665992Z"
fill="currentColor"
></path>
</svg>
</div>
<span class="text-sm text-muted-foreground">(128)</span>
</div>
<div class="card-footer justify-between">
<div class="flex items-baseline gap-2">
<span class="text-lg font-bold">$1,290</span
><span class="text-sm text-muted-foreground line-through">$1,490</span>
</div>
<button type="button" class="btn btn-sm">
Add to Cart<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="icon-end"
>
<path d="M5 12h14"></path>
<path d="M12 5v14"></path>
</svg>
</button>
</div>
</div>Pricing Card
A pricing card for Tailwind CSS. Use it on pricing pages to present a plan and let people pick it.
<div class="card w-full max-w-sm">
<div class="card-header"><h3 class="card-title">Premium Plan</h3></div>
<div class="card-content flex flex-col gap-6">
<div>
<span class="text-4xl font-bold sm:text-5xl">$29</span
><span class="ml-1 text-muted-foreground">/ month</span>
</div>
<p class="text-sm/6 text-muted-foreground">
Everything you need to scale your project and collaborate with your entire
team.
</p>
<div class="separator"></div>
<ul class="grid gap-4 text-sm">
<li class="flex items-center text-muted-foreground">
<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="mr-4 size-4 text-primary"
>
<path d="M20 6 9 17l-5-5"></path></svg
><span>Up to 10 team members</span>
</li>
<li class="flex items-center text-muted-foreground">
<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="mr-4 size-4 text-primary"
>
<path d="M20 6 9 17l-5-5"></path></svg
><span>50GB cloud storage</span>
</li>
<li class="flex items-center text-muted-foreground">
<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="mr-4 size-4 text-primary"
>
<path d="M20 6 9 17l-5-5"></path></svg
><span>Priority email support</span>
</li>
<li class="flex items-center text-muted-foreground">
<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="mr-4 size-4 text-primary"
>
<path d="M20 6 9 17l-5-5"></path></svg
><span>Advanced analytics dashboard</span>
</li>
<li class="flex items-center text-muted-foreground">
<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="mr-4 size-4 text-primary"
>
<path d="M20 6 9 17l-5-5"></path></svg
><span>API access</span>
</li>
</ul>
</div>
<div class="card-footer">
<button type="button" class="btn btn-lg w-full">Buy Now</button>
</div>
</div>Profile Card
A profile card for Tailwind CSS. Use it to introduce a person on team pages, member directories, and social features.
<div class="card relative w-full max-w-sm">
<img
src="https://images.pexels.com/photos/38485602/pexels-photo-38485602.jpeg?auto=compress&cs=tinysrgb&w=768&h=307&fit=crop"
alt=""
class="aspect-5/2 w-full object-cover"
/><button
type="button"
class="btn btn-outline btn-sm btn-icon absolute top-3 right-3"
aria-label="More options"
>
<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"
>
<circle cx="12" cy="12" r="1"></circle>
<circle cx="19" cy="12" r="1"></circle>
<circle cx="5" cy="12" r="1"></circle>
</svg>
</button>
<div class="card-header">
<span class="avatar -mt-14 size-20 ring-4 ring-card"
><img
class="avatar-image"
alt="Leila Navarro"
src="https://images.unsplash.com/photo-1750390200282-bf7f669a9946?w=640&h=640&fit=facearea&facepad=2.8&auto=format&q=100&bg-remove=true&bg=e5e5e5" /><span
class="avatar-fallback"
>LN</span
><span class="avatar-badge size-4 bg-green-600 dark:bg-green-800"></span
></span>
<h3 class="card-title mt-2">Leila Navarro</h3>
<p class="card-description">UX Lead, Design Manager</p>
<p class="mt-2">
Supporting startups and SaaS in enhancing their conversions. Always open
to thoughtful design.
</p>
</div>
<div class="card-footer gap-3">
<button type="button" class="btn flex-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="icon-start"
>
<path d="M5 12h14"></path>
<path d="M12 5v14"></path></svg
>Follow</button
><button type="button" class="btn btn-outline flex-1">Message</button>
</div>
</div>Blog Card
A blog card for Tailwind CSS. Use it to link to posts from a blog index, a news section, or a related articles row.
<div class="card w-full max-w-sm">
<img
src="https://images.pexels.com/photos/7433839/pexels-photo-7433839.jpeg?auto=compress&cs=tinysrgb&w=768&h=432&fit=crop"
alt="Team reviewing printed charts around a meeting table"
class="aspect-video w-full object-cover"
/>
<div class="card-header">
<span
class="flex items-center gap-1.5 text-xs font-medium tracking-tight text-muted-foreground"
><span>Mar 15, 2024</span><span>·</span><span>Finance</span></span
>
<h3 class="card-title">Reading Your Quarterly Numbers</h3>
<p class="card-description">
How to turn a stack of reports into two decisions your team can act on
before the next quarter.
</p>
</div>
<div class="card-footer gap-3">
<span class="avatar avatar-lg"
><img
class="avatar-image"
alt="Leila Navarro"
src="https://images.unsplash.com/photo-1750390200282-bf7f669a9946?w=640&h=640&fit=facearea&facepad=2.8&auto=format&q=100&bg-remove=true&bg=e5e5e5"
/><span class="avatar-fallback">LN</span></span
>
<div class="text-sm">
<p class="font-medium text-foreground">Leila Navarro</p>
<p class="text-muted-foreground">Finance Lead</p>
</div>
</div>
</div>Testimonial Card
A testimonial card for Tailwind CSS. Use it to show customer quotes on landing and pricing pages.
<div class="card w-full max-w-sm">
<div class="card-content flex flex-col gap-6">
<div class="flex gap-1">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="size-4.5 text-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="currentColor"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="size-4.5 text-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="currentColor"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="size-4.5 text-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="currentColor"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="size-4.5 text-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="currentColor"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="size-4.5 text-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>
</div>
<p class="card-description">
Starting Point UI has transformed how we build interfaces. The components
are beautifully designed and easy to customize.
</p>
</div>
<div class="card-footer gap-3">
<span class="avatar avatar-lg"
><img
class="avatar-image"
alt="Leila Navarro"
src="https://images.unsplash.com/photo-1750390200282-bf7f669a9946?w=640&h=640&fit=facearea&facepad=2.8&auto=format&q=100&bg-remove=true&bg=e5e5e5"
/><span class="avatar-fallback">LN</span></span
>
<div class="text-sm">
<p class="font-medium text-foreground">Leila Navarro</p>
<p class="text-muted-foreground">Product Designer</p>
</div>
</div>
</div>KPI Card
A KPI card for Tailwind CSS. Use it on dashboards to show one metric and how it moved, like revenue or active users.
<div class="grid w-full max-w-3xl gap-4 sm:grid-cols-3">
<div class="card card-sm">
<div class="card-header">
<p class="card-description">Visitors</p>
<h3 class="card-title text-2xl font-semibold tabular-nums">128.6K</h3>
<div class="card-action">
<button
type="button"
class="btn btn-ghost btn-sm btn-icon -m-2 text-muted-foreground"
aria-label="Open menu for Visitors"
>
<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"
>
<circle cx="12" cy="12" r="1"></circle>
<circle cx="19" cy="12" r="1"></circle>
<circle cx="5" cy="12" r="1"></circle>
</svg>
</button>
</div>
</div>
<div class="card-footer gap-1.5 text-muted-foreground">
<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-emerald-600 dark:text-emerald-400"
>
<path d="M16 7h6v6"></path>
<path d="m22 7-8.5 8.5-5-5L2 17"></path></svg
><span class="font-medium text-emerald-600 dark:text-emerald-400"
>24.7%</span
>vs last month
</div>
</div>
<div class="card card-sm">
<div class="card-header">
<p class="card-description">Page views</p>
<h3 class="card-title text-2xl font-semibold tabular-nums">389.1K</h3>
<div class="card-action">
<button
type="button"
class="btn btn-ghost btn-sm btn-icon -m-2 text-muted-foreground"
aria-label="Open menu for Page views"
>
<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"
>
<circle cx="12" cy="12" r="1"></circle>
<circle cx="19" cy="12" r="1"></circle>
<circle cx="5" cy="12" r="1"></circle>
</svg>
</button>
</div>
</div>
<div class="card-footer gap-1.5 text-muted-foreground">
<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-red-600 dark:text-red-400"
>
<path d="M16 17h6v-6"></path>
<path d="m22 17-8.5-8.5-5 5L2 7"></path></svg
><span class="font-medium text-red-600 dark:text-red-400">2.4%</span>vs
last month
</div>
</div>
<div class="card card-sm">
<div class="card-header">
<p class="card-description">Bounce rate</p>
<h3 class="card-title text-2xl font-semibold tabular-nums">27.11%</h3>
<div class="card-action">
<button
type="button"
class="btn btn-ghost btn-sm btn-icon -m-2 text-muted-foreground"
aria-label="Open menu for Bounce rate"
>
<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"
>
<circle cx="12" cy="12" r="1"></circle>
<circle cx="19" cy="12" r="1"></circle>
<circle cx="5" cy="12" r="1"></circle>
</svg>
</button>
</div>
</div>
<div class="card-footer gap-1.5 text-muted-foreground">
<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-emerald-600 dark:text-emerald-400"
>
<path d="M16 7h6v6"></path>
<path d="m22 7-8.5 8.5-5-5L2 17"></path></svg
><span class="font-medium text-emerald-600 dark:text-emerald-400"
>1.7%</span
>vs last month
</div>
</div>
</div>