Building a Card
Compose an image card with title, text and action.
Cards are a container with padding, rounded corners, and a shadow. Add a colored header, a title, body text, and a button to finish it.
Example
Loading editor…
Press Run to see the result.
When to use it
- A blog listing page displays post previews as cards with a cover image, title, excerpt, and read-more link built from utilities.
- An e-commerce grid shows product cards with an image, name, price badge, and add-to-cart button composed entirely from Tailwind classes.
- A team page arranges staff profiles as cards with an avatar, name, role, and social icon row assembled from utility classes.
More examples
Basic image card
The card uses overflow-hidden to clip the image to the card's rounded corners, with padding and typography utilities filling the body.
<div class="bg-white rounded-xl shadow overflow-hidden max-w-sm">
<img src="post.jpg" alt="Post" class="w-full h-48 object-cover">
<div class="p-5">
<h3 class="font-semibold text-gray-900">Article Title</h3>
<p class="text-sm text-gray-500 mt-1">Short excerpt describing the article content.</p>
<a href="#" class="mt-4 inline-block text-indigo-600 text-sm hover:underline">Read more</a>
</div>
</div>Product card with badge
A product card combines a positioned badge, price typography, and a full-width add-to-cart button to mirror a real e-commerce component.
<div class="bg-white rounded-lg border hover:shadow-md transition-shadow">
<div class="relative">
<img src="product.jpg" alt="" class="w-full h-40 object-cover rounded-t-lg">
<span class="absolute top-2 left-2 bg-red-500 text-white text-xs px-2 py-0.5 rounded-full">Sale</span>
</div>
<div class="p-4">
<p class="font-medium text-gray-900">Running Shoes</p>
<p class="text-lg font-bold text-red-600 mt-1">$59.99</p>
<button class="mt-3 w-full bg-indigo-600 text-white py-2 rounded-lg text-sm hover:bg-indigo-700">Add to Cart</button>
</div>
</div>Horizontal profile card
A horizontal card uses flex with an avatar, truncated name column, and a right-aligned status badge to fit a team member profile in a compact row.
<div class="flex items-center gap-4 p-4 bg-white border rounded-xl">
<img src="avatar.jpg" alt="" class="w-14 h-14 rounded-full object-cover flex-none">
<div class="min-w-0">
<p class="font-semibold text-gray-900 truncate">Alexandra Chen</p>
<p class="text-sm text-gray-500">Senior Engineer</p>
</div>
<span class="ml-auto bg-green-100 text-green-700 text-xs px-2 py-1 rounded-full flex-none">Online</span>
</div>
Discussion