Recipe: Card component patterns
A collection of reusable card layouts built with Tailwind CSS and native HTML. No external component libraries required.
Basic card
Minimal card with padding, border, and rounded corners.
Card title
This is a simple card body. Use it for displaying concise information in a contained surface.
Card with gradient border
A card that uses a gradient border for visual emphasis.
Premium feature
Highlight important content with a vibrant gradient border that draws attention without overwhelming the layout.
Card with icon
A card that includes an icon or graphic element at the top.
Quick action
Pair an icon with a heading to create scannable action cards that users can quickly identify and interact with.
Horizontal card
A side-by-side layout for media and content.
Media card
Horizontal cards work well for list items, search results, or any content that benefits from a thumbnail alongside text.
These patterns use only Tailwind utility classes and native HTML elements. Copy any card directly into your project — no additional dependencies needed.