See all posts

Tailwind CSS Card Component

Tailwind CSS Card Component

You need a card component for your project. Product cards, profile cards, blog post previews, they are everywhere in modern web design. But building them from scratch feels repetitive, and you are not sure which Tailwind classes to use. I'm going to show you 15 production-ready card examples. Each one includes complete HTML code you can copy and paste, plus explanations of the key Tailwind utilities. By the end, you'll understand how to build any card design you can imagine.

Table of Content

What Makes a Good Card Component

Before jumping into code, let me explain what separates a great card from a mediocre one.

  1. Clear visual hierarchy - Users should know where to look first. Use font sizes, weights, and spacing to guide their eyes.

  2. Consistent spacing - Don't randomly throw p-4 and p-6 around. Pick a spacing system and stick to it.

  3. Responsive by default - Cards should look good on phones, tablets, and desktops without extra code.

  4. Scannable content - Keep text short and actionable. Nobody reads long paragraphs in cards.

  5. Purposeful interactions - If a card is clickable, make it obvious with hover states and cursor changes.

Tailwind makes all of this easy because you're building with utilities instead of fighting against pre-made components. Let's build some cards.

1. Simple Card with Title and Description

Let's start with the basics. This card has a title, description, and a link—perfect for blog posts or news articles.

html
<div class="max-w-sm bg-white rounded-lg shadow-md overflow-hidden">
	<div class="p-6">
		<h3 class="text-2xl font-bold text-gray-900 mb-3">
			Getting Started with Tailwind CSS
		</h3>
		<p class="text-gray-600 text-base mb-4">
			Learn how to set up Tailwind CSS in your project and start building
			beautiful interfaces with utility-first classes.
		</p>
		<a
			href="#"
			class="text-blue-600 font-semibold hover:text-blue-800 transition-colors"
		>
			Read more →
		</a>
	</div>
</div>

Preview

Getting Started with Tailwind CSS

Learn how to set up Tailwind CSS in your project and start building beautiful interfaces with utility-first classes.

Read more →

Key utilities explained:

  • max-w-sm - Caps width at 384px (perfect for card grids)
  • rounded-lg- Gives rounded corners (8px radius)
  • shadow-md - Adds medium box shadow for depth
  • overflow-hidden - Prevents content from breaking rounded corners
  • hover:text-blue-800 - Changes link color on hover

This is your foundation. Everything else builds on this pattern.

2. Card with Header and Footer

Add a header and footer for more structured content. Great for dashboards or admin panels.

html
<div class="max-w-sm bg-white rounded-lg shadow-lg overflow-hidden">
	<div class="bg-linear-to-r from-blue-500 to-blue-600 px-6 py-4">
		<h3 class="text-xl font-bold text-white">Monthly Report</h3>
	</div>
	<div class="p-6">
		<p class="text-gray-700 mb-4">
			Your website received 12,450 visitors this month, up 23% from last month.
		</p>
		<div class="flex items-center justify-between text-sm">
			<span class="text-gray-500">Progress</span>
			<span class="font-semibold text-green-600">+23%</span>
		</div>
	</div>
	<div class="bg-gray-50 px-6 py-4 border-t border-gray-200">
		<button
			class="text-blue-600 font-semibold hover:text-blue-800 transition-colors"
		>
			View Details
		</button>
	</div>
</div>

Preview

Monthly Report

Your website received 12,450 visitors this month, up 23% from last month.

Progress+23%

Pro tip: The gradient header (bg-gradient-to-r from-blue-500 to-blue-600) adds visual interest without extra images. The footer uses bg-gray-50 to create subtle separation from the body.

3. Horizontal Card Layout

Sometimes you need cards that run horizontally. Perfect for list views or mobile layouts.

html
<div
	class="max-w-2xl bg-white rounded-lg shadow-md overflow-hidden flex flex-col sm:flex-row"
>
	<div class="sm:w-1/3">
		<img
			src="https://images.unsplash.com/photo-1496128858413-b36217c2ce36?w=300"
			alt="Workspace"
			class="w-full h-48 sm:h-full object-cover"
		/>
	</div>
	<div class="p-6 sm:w-2/3">
		<div class="flex items-center mb-2">
			<span
				class="bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded"
			>
				Featured
			</span>
		</div>
		<h3 class="text-xl font-bold text-gray-900 mb-2">
			Modern Workspace Design
		</h3>
		<p class="text-gray-600 mb-4">
			Create a productive environment with these workspace design tips and
			modern furniture recommendations.
		</p>
		<div class="flex items-center justify-between">
			<span class="text-sm text-gray-500">5 min read</span>
			<a href="#" class="text-blue-600 font-semibold hover:text-blue-800">
				Read article →
			</a>
		</div>
	</div>
</div>

Preview

Workspace

Featured

Modern Workspace Design

Create a productive environment with these workspace design tips and modern furniture recommendations.

5 min read

Read article →

Notice the responsive pattern: flex-col sm:flex-row stacks vertically on mobile, then switches to horizontal on tablets and up. The image uses object-cover to maintain aspect ratio without distortion.

4. Product Card with Image

E-commerce cards need images, pricing, and clear call-to-action buttons. Here's a pattern I use constantly.

html
<div class="max-w-sm bg-white rounded-lg shadow-lg overflow-hidden group">
	<div class="relative overflow-hidden">
		<img
			src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=400"
			alt="Product"
			class="w-full h-64 object-cover group-hover:scale-110 transition-transform duration-300"
		/>
		<div class="absolute top-4 right-4">
			<span
				class="bg-red-500 text-white text-xs font-bold px-3 py-1 rounded-full"
			>
				Sale
			</span>
		</div>
	</div>
	<div class="p-6">
		<h3 class="text-xl font-bold text-gray-900 mb-2">Wireless Headphones</h3>
		<p class="text-gray-600 text-sm mb-4">
			Premium noise-cancelling headphones with 30-hour battery life.
		</p>
		<div class="flex items-center justify-between mb-4">
			<div>
				<span class="text-2xl font-bold text-gray-900">$199</span>
				<span class="text-sm text-gray-500 line-through ml-2">$299</span>
			</div>
			<div class="flex items-center">
				<svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 20 20">
					<path
						d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"
					/>
				</svg>
				<span class="ml-1 text-sm text-gray-600">4.8</span>
			</div>
		</div>
		<button
			class="w-full bg-blue-600 text-white py-3 rounded-lg font-semibold hover:bg-blue-700 transition-colors"
		>
			Add to Cart
		</button>
	</div>
</div>

Preview

Product

Sale

Wireless Headphones

Premium noise-cancelling headphones with 30-hour battery life.

$199$299
4.8

The zoom effect on hover (group-hover:scale-110) gives the card life. The group class on the parent enables this. The sale badge uses absolute positioning to float over the image.

5. Card with Avatar and Metadata

Perfect for user content, comments, or social media posts.

html
<div class="max-w-md bg-white rounded-lg shadow-md p-6">
	<div class="flex items-center mb-4">
		<img
			src="https://i.pravatar.cc/150?img=12"
			alt="Author"
			class="w-12 h-12 rounded-full"
		/>
		<div class="ml-3">
			<h4 class="text-sm font-bold text-gray-900">Sarah Johnson</h4>
			<p class="text-xs text-gray-500">2 hours ago</p>
		</div>
	</div>
	<p class="text-gray-700 mb-4">
		Just finished implementing the new dashboard design. The Tailwind utilities
		made it so much faster than writing custom CSS. Highly recommend!
	</p>
	<div class="flex flex-wrap gap-2 mb-4">
		<span
			class="bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-1 rounded"
		>
			#tailwindcss
		</span>
		<span
			class="bg-green-100 text-green-800 text-xs font-semibold px-2.5 py-1 rounded"
		>
			#webdev
		</span>
		<span
			class="bg-purple-100 text-purple-800 text-xs font-semibold px-2.5 py-1 rounded"
		>
			#frontend
		</span>
	</div>
	<div
		class="flex items-center justify-between text-sm text-gray-500 border-t pt-4"
	>
		<button class="flex items-center hover:text-blue-600 transition-colors">
			<svg
				class="w-5 h-5 mr-1"
				fill="none"
				stroke="currentColor"
				viewBox="0 0 24 24"
			>
				<path
					stroke-linecap="round"
					stroke-linejoin="round"
					stroke-width="2"
					d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
				/>
			</svg>
			<span>24</span>
		</button>
		<button class="flex items-center hover:text-blue-600 transition-colors">
			<svg
				class="w-5 h-5 mr-1"
				fill="none"
				stroke="currentColor"
				viewBox="0 0 24 24"
			>
				<path
					stroke-linecap="round"
					stroke-linejoin="round"
					stroke-width="2"
					d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
				/>
			</svg>
			<span>12</span>
		</button>
		<button class="flex items-center hover:text-blue-600 transition-colors">
			<svg
				class="w-5 h-5 mr-1"
				fill="none"
				stroke="currentColor"
				viewBox="0 0 24 24"
			>
				<path
					stroke-linecap="round"
					stroke-linejoin="round"
					stroke-width="2"
					d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"
				/>
			</svg>
			<span>Share</span>
		</button>
	</div>
</div>

Preview

Author

Sarah Johnson

2 hours ago

Just finished implementing the new dashboard design. The Tailwind utilities made it so much faster than writing custom CSS. Highly recommend!

#tailwindcss

#webdev

#frontend

Social proof elements like likes and comments make cards more engaging. The flex-wrap gap-2 on tags prevents them from overflowing on narrow screens.

6. Pricing Card

Pricing tables are just cards arranged in a grid. Here's a single pricing card.

html
<div
	class="max-w-sm bg-white rounded-2xl shadow-xl overflow-hidden border-2 border-transparent hover:border-blue-500 transition-all"
>
	<div
		class="bg-linear-to-br from-blue-500 to-blue-600 text-white text-center py-8 px-6"
	>
		<h3 class="text-2xl font-bold mb-2">Professional</h3>
		<p class="text-blue-100">For growing teams</p>
		<div class="mt-6">
			<span class="text-5xl font-bold">$49</span>
			<span class="text-blue-100">/month</span>
		</div>
	</div>


	<div class="p-8">
		<ul class="space-y-4 mb-8">
			<li class="flex items-center">
				<svg
					class="w-5 h-5 text-green-500 mr-3 shrink-0"
					fill="currentColor"
					viewBox="0 0 20 20"
				>
					<path
						fill-rule="evenodd"
						d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
						clip-rule="evenodd"
					/>
				</svg>
				<span class="text-gray-700">Unlimited projects</span>
			</li>
			<li class="flex items-center">
				<svg
					class="w-5 h-5 text-green-500 mr-3 shrink-0"
					fill="currentColor"
					viewBox="0 0 20 20"
				>
					<path
						fill-rule="evenodd"
						d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
						clip-rule="evenodd"
					/>
				</svg>
				<span class="text-gray-700">Up to 10 team members</span>
			</li>
			<li class="flex items-center">
				<svg
					class="w-5 h-5 text-green-500 mr-3 shrink-0"
					fill="currentColor"
					viewBox="0 0 20 20"
				>
					<path
						fill-rule="evenodd"
						d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
						clip-rule="evenodd"
					/>
				</svg>
				<span class="text-gray-700">Priority support</span>
			</li>
			<li class="flex items-center">
				<svg
					class="w-5 h-5 text-green-500 mr-3 shrink-0"
					fill="currentColor"
					viewBox="0 0 20 20"
				>
					<path
						fill-rule="evenodd"
						d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
						clip-rule="evenodd"
					/>
				</svg>
				<span class="text-gray-700">Advanced analytics</span>
			</li>
		</ul>


		<button
			class="w-full bg-blue-600 text-white py-3 rounded-lg font-semibold hover:bg-blue-700 transition-colors"
		>
			Get Started
		</button>
	</div>
</div>

Preview

Professional

For growing teams

$49/month
  • Unlimited projects
  • Up to 10 team members
  • Priority support
  • Advanced analytics

The hover border effect (hover:border-blue-500) highlights the selected plan. Use space-y-4 on the list for consistent vertical spacing between features.

7. Blog Post Card

Blog cards need images, categories, reading time, and author info.

html
<div class="max-w-sm bg-white rounded-xl shadow-lg overflow-hidden">
	<div class="relative h-48 overflow-hidden">
		<img
			src="https://images.unsplash.com/photo-1499750310107-5fef28a66643?w=400"
			alt="Blog post"
			class="w-full h-full object-cover"
		/>
		<div class="absolute top-4 left-4">
			<span
				class="bg-purple-600 text-white text-xs font-bold px-3 py-1 rounded-full"
			>
				Tutorial
			</span>
		</div>
	</div>
	<div class="p-6">
		<h3
			class="text-xl font-bold text-gray-900 mb-2 hover:text-blue-600 cursor-pointer transition-colors"
		>
			Build a Modern Dashboard with Tailwind CSS
		</h3>
		<p class="text-gray-600 text-sm mb-4 line-clamp-3">
			Learn how to create a responsive dashboard interface using Tailwind CSS
			utility classes. This tutorial covers layouts, charts, and interactive
			components.
		</p>
		<div class="flex items-center justify-between text-sm">
			<div class="flex items-center">
				<img
					src="https://i.pravatar.cc/150?img=33"
					alt="Author"
					class="w-8 h-8 rounded-full mr-2"
				/>
				<span class="text-gray-700 font-medium">Mike Chen</span>
			</div>
			<div class="flex items-center text-gray-500">
				<svg
					class="w-4 h-4 mr-1"
					fill="none"
					stroke="currentColor"
					viewBox="0 0 24 24"
				>
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="2"
						d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
					/>
				</svg>
				<span>8 min read</span>
			</div>
		</div>
	</div>
</div>

Preview

Blog post

Tutorial

Build a Modern Dashboard with Tailwind CSS

Learn how to create a responsive dashboard interface using Tailwind CSS utility classes. This tutorial covers layouts, charts, and interactive components.

AuthorMike Chen
8 min read

The line-clamp-3 utility truncates text after 3 lines with an ellipsis. Super useful for maintaining consistent card heights in grids. Note: You'll need to add the @tailwindcss/line-clamp plugin for this to work (or use the built-in version in Tailwind v3.3+).

8. Profile Card with Stats

Great for user profiles, team pages, or social platforms.

html
<div class="max-w-sm bg-white rounded-2xl shadow-xl overflow-hidden">
	<div
		class="h-32 bg-linear-to-r from-purple-500 via-pink-500 to-red-500"
	></div>
	<div class="relative px-6 pb-6">
		<div class="flex justify-center -mt-16 mb-4">
			<img
				src="https://i.pravatar.cc/150?img=25"
				alt="Profile"
				class="w-32 h-32 rounded-full border-4 border-white shadow-xl"
			/>
		</div>
		<div class="text-center mb-6">
			<h3 class="text-2xl font-bold text-gray-900 mb-1">Emma Wilson</h3>
			<p class="text-gray-600">Senior Product Designer</p>
			<p class="text-sm text-gray-500 mt-1">San Francisco, CA</p>
		</div>
		<div class="grid grid-cols-3 gap-4 mb-6 text-center">
			<div>
				<p class="text-2xl font-bold text-gray-900">2.5K</p>
				<p class="text-xs text-gray-500">Followers</p>
			</div>
			<div>
				<p class="text-2xl font-bold text-gray-900">842</p>
				<p class="text-xs text-gray-500">Following</p>
			</div>
			<div>
				<p class="text-2xl font-bold text-gray-900">127</p>
				<p class="text-xs text-gray-500">Posts</p>
			</div>
		</div>
		<div class="flex gap-3">
			<button
				class="flex-1 bg-blue-600 text-white py-2.5 rounded-lg font-semibold hover:bg-blue-700 transition-colors"
			>
				Follow
			</button>
			<button
				class="flex-1 border-2 border-blue-600 text-blue-600 py-2.5 rounded-lg font-semibold hover:bg-blue-50 transition-colors"
			>
				Message
			</button>
		</div>
	</div>
</div>

Preview

Profile

Emma Wilson

Senior Product Designer

San Francisco, CA

2.5K

Followers

842

Following

127

Posts

The avatar overlaps the cover using negative margin (-mt-16). The stats grid (grid-cols-3) divides space evenly. This pattern works great for any profile or contact card.

9. Notification Card

Perfect for alerts, updates, or activity feeds.

html
<div
	class="max-w-md bg-white rounded-lg shadow-md p-4 border-l-4 border-blue-500"
>
	<div class="flex items-start">
		<div class="shrink-0">
			<div
				class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center"
			>
				<svg
					class="w-6 h-6 text-blue-600"
					fill="none"
					stroke="currentColor"
					viewBox="0 0 24 24"
				>
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="2"
						d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
					/>
				</svg>
			</div>
		</div>
		<div class="ml-4 flex-1">
			<div class="flex items-center justify-between mb-1">
				<h4 class="text-sm font-bold text-gray-900">New Update Available</h4>
				<span class="text-xs text-gray-500">2m ago</span>
			</div>
			<p class="text-sm text-gray-600 mb-3">
				Version 2.0 includes new features and performance improvements. Update
				now to get the latest changes.
			</p>
			<div class="flex gap-3">
				<button class="text-sm text-blue-600 font-semibold hover:text-blue-800">
					Update Now
				</button>
				<button class="text-sm text-gray-500 hover:text-gray-700">
					Dismiss
				</button>
			</div>
		</div>
	</div>
</div>

Preview

New Update Available

2m ago

Version 2.0 includes new features and performance improvements. Update now to get the latest changes.

The colored left border (border-l-4 border-blue-500) makes the notification type instantly recognizable. Change the color for different notification types: blue for info, green for success, yellow for warning, red for errors.

10. Testimonial Card

Customer reviews and testimonials need quotes, ratings, and author info.

html
<div class="max-w-md bg-white rounded-xl shadow-lg p-8">
	<div class="mb-4">
		<svg
			class="w-10 h-10 text-gray-300"
			fill="currentColor"
			viewBox="0 0 24 24"
		>
			<path
				d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z"
			/>
		</svg>
	</div>
	<p class="text-gray-700 text-lg mb-6">
		"Tailwind CSS transformed how our team builds interfaces. We ship features
		3x faster now, and our codebase is cleaner than ever."
	</p>
	<div class="flex mb-4">
		<svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 20 20">
			<path
				d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"
			/>
		</svg>
		<svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 20 20">
			<path
				d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"
			/>
		</svg>
		<svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 20 20">
			<path
				d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"
			/>
		</svg>
		<svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 20 20">
			<path
				d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"
			/>
		</svg>
		<svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 20 20">
			<path
				d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"
			/>
		</svg>
	</div>
	<div class="flex items-center">
		<img
			src="https://i.pravatar.cc/150?img=45"
			alt="Customer"
			class="w-12 h-12 rounded-full mr-4"
		/>
		<div>
			<h4 class="text-sm font-bold text-gray-900">Jane Park</h4>
			<p class="text-xs text-gray-500">CTO at TechCorp</p>
		</div>
	</div>
</div>

Preview

"Tailwind CSS transformed how our team builds interfaces. We ship features 3x faster now, and our codebase is cleaner than ever."

Customer

Jane Park

CTO at TechCorp

Testimonials work best when they include specific results or numbers ("3x faster"). The quote icon adds visual interest without images.

11. Hover Card with Scale Effect

Add subtle animations to make cards feel more interactive.

html
<div
	class="max-w-sm bg-white rounded-xl shadow-md overflow-hidden hover:shadow-2xl hover:scale-105 transition-all duration-300 cursor-pointer"
>
	<div
		class="h-48 bg-linear-to-br from-indigo-500 to-purple-600 flex items-center justify-center"
	>
		<svg
			class="w-20 h-20 text-white"
			fill="none"
			stroke="currentColor"
			viewBox="0 0 24 24"
		>
			<path
				stroke-linecap="round"
				stroke-linejoin="round"
				stroke-width="2"
				d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"
			/>
		</svg>
	</div>
	<div class="p-6">
		<h3 class="text-xl font-bold text-gray-900 mb-2">Feature Highlight</h3>
		<p class="text-gray-600 mb-4">
			This card scales up and adds shadow on hover, creating an engaging
			interactive experience for your users.
		</p>
		<div class="flex items-center justify-between">
			<span class="text-sm text-indigo-600 font-semibold">Learn More →</span>
			<span
				class="bg-indigo-100 text-indigo-800 text-xs font-semibold px-3 py-1 rounded-full"
			>
				New
			</span>
		</div>
	</div>
</div>

Preview

Feature Highlight

This card scales up and adds shadow on hover, creating an engaging interactive experience for your users.

Learn More →

New

12. Card with Badge and Status

Show item status, availability, or progress with badges.

html
<div class="max-w-sm bg-white rounded-lg shadow-md overflow-hidden">
	<div class="p-6">
		<div class="flex items-start justify-between mb-4">
			<div>
				<h3 class="text-xl font-bold text-gray-900 mb-1">Development Sprint</h3>
				<p class="text-sm text-gray-500">Due in 3 days</p>
			</div>
			<span
				class="bg-green-100 text-green-800 text-xs font-bold px-3 py-1 rounded-full"
			>
				Active
			</span>
		</div>
		<p class="text-gray-600 mb-4">
			Complete the user authentication flow and implement password reset
			functionality.
		</p>
		<div class="mb-4">
			<div class="flex justify-between text-sm mb-2">
				<span class="text-gray-600">Progress</span>
				<span class="font-semibold text-gray-900">75%</span>
			</div>
			<div class="w-full bg-gray-200 rounded-full h-2">
				<div class="bg-blue-600 h-2 rounded-full w-3/4" ></div>
			</div>
		</div>
		<div class="flex items-center justify-between">
			<div class="flex -space-x-2">
				<img
					class="w-8 h-8 rounded-full border-2 border-white"
					src="https://i.pravatar.cc/150?img=1"
					alt="Member 1"
				/>
				<img
					class="w-8 h-8 rounded-full border-2 border-white"
					src="https://i.pravatar.cc/150?img=2"
					alt="Member 2"
				/>
				<img
					class="w-8 h-8 rounded-full border-2 border-white"
					src="https://i.pravatar.cc/150?img=3"
					alt="Member 3"
				/>
				<div
					class="w-8 h-8 rounded-full border-2 border-white bg-gray-200 flex items-center justify-center"
				>
					<span class="text-xs font-semibold text-gray-600">+5</span>
				</div>
			</div>
			<button class="text-sm text-blue-600 font-semibold hover:text-blue-800">
				View Details →
			</button>
		</div>
	</div>
</div>

Preview

Development Sprint

Due in 3 days

Active

Complete the user authentication flow and implement password reset functionality.

Progress75%
Member 1Member 2Member 3
+5

The overlapping avatars use -space-x-2 to create negative horizontal spacing. This stacks them nicely without manual positioning.

13. Video Card with Play Button

Media cards need thumbnails and clear playback indicators.

html
<div class="max-w-sm bg-white rounded-lg shadow-lg overflow-hidden">
	<div class="relative group cursor-pointer">
		<img
			src="https://images.unsplash.com/photo-1611162617474-5b21e879e113?w=400"
			alt="Video thumbnail"
			class="w-full h-56 object-cover"
		/>
		<div
			class="absolute inset-0 bg-black bg-opacity-30 group-hover:bg-opacity-40 transition-all flex items-center justify-center"
		>
			<div
				class="w-16 h-16 bg-white rounded-full flex items-center justify-center group-hover:scale-110 transition-transform"
			>
				<svg
					class="w-8 h-8 text-gray-900 ml-1"
					fill="currentColor"
					viewBox="0 0 20 20"
				>
					<path
						d="M6.3 2.841A1.5 1.5 0 004 4.11V15.89a1.5 1.5 0 002.3 1.269l9.344-5.89a1.5 1.5 0 000-2.538L6.3 2.84z"
					/>
				</svg>
			</div>
		</div>
		<div
			class="absolute bottom-4 right-4 bg-black bg-opacity-75 text-white text-xs font-semibold px-2 py-1 rounded"
		>
			12:34
		</div>
	</div>
	<div class="p-6">
		<h3 class="text-lg font-bold text-gray-900 mb-2">
			Tailwind CSS Tutorial: Building Cards
		</h3>
		<p class="text-sm text-gray-600 mb-4">
			Learn how to create beautiful, responsive card components using Tailwind's
			utility classes.
		</p>
		<div class="flex items-center justify-between text-sm text-gray-500">
			<span>24K views</span>
			<span>•</span>
			<span>2 days ago</span>
			<span>•</span>
			<span class="flex items-center">
				<svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
					<path
						d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.43a2 2 0 001.106 1.79l.05.025A4 4 0 008.943 18h5.416a2 2 0 001.962-1.608l1.2-6A2 2 0 0015.56 8H12V4a2 2 0 00-2-2 1 1 0 00-1 1v.667a4 4 0 01-.8 2.4L6.8 7.933a4 4 0 00-.8 2.4z"
					/>
				</svg>
				1.2K
			</span>
		</div>
	</div>
</div>

Preview

Video thumbnail

12:34

Tailwind CSS Tutorial: Building Cards

Learn how to create beautiful, responsive card components using Tailwind's utility classes.

24K views•2 days ago•

1.2K

The play button overlay uses absolute positioning with inset-0 to cover the entire thumbnail. The group and group-hover classes create coordinated hover effects.

14. Stats Card with Icon

Dashboard cards that display metrics and key performance indicators.

html
<div
	class="max-w-sm bg-white rounded-lg shadow-md p-6 border-l-4 border-blue-500"
>
	<div class="flex items-center justify-between">
		<div>
			<p class="text-sm font-medium text-gray-500 mb-1">Total Revenue</p>
			<p class="text-3xl font-bold text-gray-900 mb-2">$45,231</p>
			<div class="flex items-center text-sm">
				<span class="text-green-600 font-semibold flex items-center">
					<svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
						<path
							fill-rule="evenodd"
							d="M12 7a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0V8.414l-4.293 4.293a1 1 0 01-1.414 0L8 10.414l-4.293 4.293a1 1 0 01-1.414-1.414l5-5a1 1 0 011.414 0L11 10.586 14.586 7H12z"
							clip-rule="evenodd"
						/>
					</svg>
					12.5%
				</span>
				<span class="text-gray-500 ml-2">vs last month</span>
			</div>
		</div>
		<div
			class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center"
		>
			<svg
				class="w-6 h-6 text-blue-600"
				fill="none"
				stroke="currentColor"
				viewBox="0 0 24 24"
			>
				<path
					stroke-linecap="round"
					stroke-linejoin="round"
					stroke-width="2"
					d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
				/>
			</svg>
		</div>
	</div>
</div>

Preview

Total Revenue

$45,231

12.5%

vs last month

Stats cards should show trends, the arrow and percentage change give context. Use green for positive trends, red for negative.

15. Card with Image Overlay Text

Perfect for featured content or hero sections.

html
<div class="max-w-sm rounded-xl shadow-xl overflow-hidden cursor-pointer group">
	<div class="relative h-96">
		<img
			src="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=400"
			alt="Featured"
			class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
		/>
		<div
			class="absolute inset-0 bg-linear-to-t from-black via-black/50 to-transparent"
		></div>
		<div class="absolute bottom-0 left-0 right-0 p-6 text-white">
			<span
				class="bg-red-600 text-xs font-bold px-3 py-1 rounded-full mb-3 inline-block"
			>
				Featured
			</span>
			<h3 class="text-2xl font-bold mb-2">The Future of Web Development</h3>
			<p class="text-gray-200 text-sm mb-4">
				Exploring modern frameworks and tools that are shaping how we build for
				the web.
			</p>
			<div class="flex items-center justify-between">
				<div class="flex items-center">
					<img
						src="https://i.pravatar.cc/150?img=18"
						alt="Author"
						class="w-10 h-10 rounded-full border-2 border-white mr-3"
					/>
					<div>
						<p class="font-semibold text-sm">Jessica Taylor</p>
						<p class="text-gray-300 text-xs">March 15, 2025</p>
					</div>
				</div>
				<button
					class="bg-white text-gray-900 px-4 py-2 rounded-lg text-sm font-semibold hover:bg-gray-100 transition-colors"
				>
					Read More
				</button>
			</div>
		</div>
	</div>
</div>

Preview

Featured

Featured

The Future of Web Development

Exploring modern frameworks and tools that are shaping how we build for the web.

Author

Jessica Taylor

March 15, 2025

The gradient overlay (bg-linear-to-t from-black) ensures text remains readable over any image. This technique works for any hero or feature card.

Building a Card Grid Layout

Now that you've got individual cards, let's arrange them in a grid. This responsive layout works for any card type.

html
<div class="container mx-auto px-4 py-12">
	<h2 class="text-3xl font-bold text-gray-900 mb-8">Featured Products</h2>
	<div
		class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"
	>
		<div class="bg-white rounded-lg shadow-md p-6">
			<h3 class="text-xl font-bold mb-2">Card 1</h3>
			<p class="text-gray-600">Content goes here</p>
		</div>


		<div class="bg-white rounded-lg shadow-md p-6">
			<h3 class="text-xl font-bold mb-2">Card 2</h3>
			<p class="text-gray-600">Content goes here</p>
		</div>


		<!-- Add more cards... -->
	</div>
</div>

The breakpoint system:

  • Mobile: 1 column (grid-cols-1)
  • Small tablets: 2 columns (sm:grid-cols-2)
  • Large tablets/laptops: 3 columns (lg:grid-cols-3)
  • Desktop: 4 columns (xl:grid-cols-4)

The gap-6 adds consistent spacing between cards. Adjust based on your design needs.

Card Best Practices I've Learned

After building hundreds of cards, here's what actually matters:

  1. Keep content scannable - Users skim cards. Put the most important info first (title, price, status).
  2. Use consistent spacing - Pick values like p-4, p-6, p-8 and stick to them. Don't mix p-5 and p-7 randomly.
  3. Mind your shadows - shadow-md is usually enough. shadow-2xl looks overdone unless it's a featured card.
  4. Make clickable cards obvious - Add cursor-pointer, hover states, and transitions. Users should know they can interact.
  5. Don't overcrowd - White space is your friend. Better to have less content that's readable than cramming everything in.
  6. Test on real devices - Cards that look perfect on your monitor might be too small on phones or too large on tablets.
  7. Optimize images - Use proper image sizes and formats. A card with a 5MB image defeats the purpose of Tailwind's small CSS.

Accessibility Considerations

Cards need to work for everyone. Here's what to check:

Add semantic HTML - Use <article> or <section> tags for card containers, not just <div>.

html
<article class="bg-white rounded-lg shadow-md p-6"></article>

Include alt text - Every image needs descriptive alt text. Screen readers announce this to users who can't see images.

Make interactive cards keyboard-accessible - If a card is clickable, use a <button> or <a> tag, not a <div> with an onclick handler.

Maintain color contrast - Text should have a 4.5:1 contrast ratio against its background. Use tools like WebAIM's contrast checker to verify.

Don't rely solely on color - Use icons or text labels alongside color-coded badges. Some users can't distinguish colors.

Learn more about accessible card patterns in the W3C Web Accessibility Initiative guidelines.

Common Card Mistakes to Avoid

I've made all these mistakes. Learn from my pain:

Mistake 1: Inconsistent card heights in grids

When cards have different amounts of content, they look messy in a grid. Fix this with min-height or flexbox.

html
<div class="grid grid-cols-3 gap-6">
	<div class="bg-white p-6">Short content</div>
	<div class="bg-white p-6">This card has much longer content...</div>
</div>
<div class="grid grid-cols-3 gap-6">
	<div class="bg-white p-6 min-h-[300px] flex flex-col">
		<h3 class="text-xl font-bold mb-2">Title</h3>
		<p class="grow">Content</p>
		<button class="mt-4">Action</button>
	</div>
</div>

Mistake 2: Forgetting mobile users

Cards that look great on desktop often break on mobile. Always test responsive breakpoints.

Mistake 3: Too many hover effects

One or two effects are elegant. Five effects are distracting. Pick scale OR shadow OR background change, not all three.

Mistake 4: Ignoring loading states

Cards that load content dynamically need skeleton loaders or spinners. Don't leave users staring at empty boxes.

html
<div class="bg-white rounded-lg shadow-md p-6 animate-pulse">
	<div class="h-4 bg-gray-300 rounded w-3/4 mb-3"></div>
	<div class="h-3 bg-gray-200 rounded w-full mb-2"></div>
	<div class="h-3 bg-gray-200 rounded w-5/6"></div>
</div>

Customizing Card Styles

Want to create reusable card styles? Add them to your tailwind.config.js or CSS file.

Option 1: Config File (Recommended)

js
module.exports = {
	theme: {
		extend: {
			boxShadow: {
				card: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
				"card-hover":
					"0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
			},
			borderRadius: {
				card: "12px",
			},
		},
	},
};

Now use shadow-card, shadow-card-hover, and rounded-card in your HTML.

Option 2: Component Classes

css
/* In your main CSS file */
@layer components {
	.card {
		@apply bg-white rounded-xl shadow-md overflow-hidden;
	}


	.card-hover {
		@apply hover:shadow-2xl hover:scale-105 transition-all duration-300 cursor-pointer;
	}


	.card-header {
		@apply px-6 py-4 border-b border-gray-200;
	}


	.card-body {
		@apply p-6;
	}


	.card-footer {
		@apply px-6 py-4 bg-gray-50 border-t border-gray-200;
	}
}

Then use semantic class names:

html
<div class="card card-hover">
	<div class="card-header">
		<h3 class="text-xl font-bold">Title</h3>
	</div>
	<div class="card-body">
		<p>Content</p>
	</div>
	<div class="card-footer">
		<button>Action</button>
	</div>
</div>

This approach works great for design systems or when you're building many similar cards.

Frameworks and Libraries

Don't want to build every card from scratch? These libraries offer pre-built Tailwind card components:

  • Flowbite - 20+ card variations ready to copy and paste
  • Headless UI - Unstyled components you add Tailwind classes to
  • DaisyUI - Semantic component classes like <div class="card">
  • Tailwind UI - Official component library (paid) from Tailwind's creators
  • Meraki UI - Free beautiful components

These aren't framework dependencies that bloat your bundle. They're just well-designed examples you copy into your project.

Wrapping Up

You now have 15 production-ready card components you can copy, customize, and use in any project. Every example uses pure Tailwind utilities, no custom CSS required. The beauty of Tailwind cards is their flexibility. Start with these examples, then mix and match elements to create exactly what your design needs.

Back to blog posts

Windframe is an AI visual editor for rapidly building stunning web UIs & websites

Start building stunning web UIs & websites!

Build from scratch or select prebuilt tailwind templates
Learn more about Windframe