Card customization playground
Customizing cards
Build a consistent card system using Tailwind utilities. Tune radius, shadow, spacing, hover states, base styles (Preflight), and layout helpers (aspect-ratio, container), then copy the resulting JSX or extract styles for reuse.
Card controls
Toggles
Color controllers
These controls use the attached Tailwind color playground components (draggable palettes). They emit Tailwind utility classes; the preview and snippets update immediately.
Note: Preflight is a build-time switch (tailwind.config.js). This toggle approximates the visual differences so you can reason about defaults without changing config.
Preflight demo
enabled- Lists
- Margins
- Form element resets
If you disable Preflight in your config, be explicit about base typography and form styles (either with your own CSS, or by adding utilities where needed).
export function CardExample() {
return (
<div className="overflow-hidden rounded-xl shadow-sm border border-slate-200 bg-white text-slate-900 transition focus-within:ring-emerald-600 focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-offset-slate-100 hover:-translate-y-0.5 hover:shadow-md">
<div className="w-full h-32 bg-slate-200/70 dark:bg-slate-800" />
<div className="grid gap-3 p-5">
<div className="flex items-start justify-between gap-3">
<div className="space-y-1">
<h3 className="text-sm font-semibold">Quarterly review</h3>
<p className="text-xs text-slate-500">
Latest metrics and highlights.
</p>
</div>
<span className="rounded-full px-2 py-1 text-[11px] font-medium bg-emerald-600/12 text-white">
Live
</span>
</div>
<div className="grid divide-y divide-slate-200">
<div className="flex items-center justify-between py-2 text-sm">
<span className="text-slate-500">Revenue</span>
<span className="font-medium">$128,450</span>
</div>
<div className="flex items-center justify-between py-2 text-sm">
<span className="text-slate-500">Churn</span>
<span className="font-medium">1.8%</span>
</div>
</div>
<div className="flex items-center justify-between gap-2 pt-1">
<a href="#" className="text-xs underline decoration-2 decoration-emerald-300">
Details
</a>
<div className="flex items-center gap-2">
<button className="rounded-lg border border-slate-300 px-3 py-1.5 text-xs font-medium text-slate-700 transition hover:bg-slate-50 dark:border-slate-700 dark:text-slate-200 dark:hover:bg-slate-800 focus-visible:outline focus-visible:outline-offset-2 outline-emerald-400">
Dismiss
</button>
<button className="rounded-lg px-3 py-1.5 text-xs font-medium transition bg-emerald-600 text-white hover:opacity-95">
Open
</button>
</div>
</div>
</div>
</div>
)
}/* app/globals.css (or any file processed by Tailwind) */
@layer components {
.card {
@apply overflow-hidden rounded-xl shadow-sm border border-slate-200 bg-white text-slate-900;
}
.card--interactive {
@apply transition hover:shadow-md hover:-translate-y-0.5 focus-within:ring-2 focus-within:ring-emerald-600 focus-within:ring-offset-2 focus-within:ring-offset-slate-100;
}
.card__media {
@apply w-full h-32 bg-slate-200/70 dark:bg-slate-800;
}
.card__body {
@apply p-5 grid gap-3;
}
}/** @type {import('tailwindcss').Config} */
module.exports = {
// ...
theme: {
extend: {
boxShadow: {
// Use: shadow-card
card: '0 10px 30px -12px rgb(15 23 42 / 0.25)',
},
borderRadius: {
// Use: rounded-card
card: '1.25rem',
},
},
},
}Card recipes
Common patterns you can standardize across your UI. Keep the “shell” consistent and vary content density, media, and actions.
Minimal
No media, compact spacing, subtle shadow.
Welcome back
Pick up where you left off.
Clickable list row
Use hover + focus-visible for accessibility.
Media + actions
Great for marketing or dashboards.
Feature spotlight
A short description that wraps to a second line.