Tailwind CSS Card Component

Basic Card

The foundation. Every other pattern builds on this:

<div class="bg-slate-800 rounded-xl shadow-lg p-6 max-w-sm">
    <h3 class="text-white font-bold text-lg">Card Title</h3>
    <p class="text-slate-400 mt-2">
        This is a basic card with a title and description.
    </p>
</div>

• rounded-xl — soft corners.
• shadow-lg — depth.
• p-6 — internal padding.
• max-w-sm — caps the width so it doesn't stretch.

Card with Image

<div class="bg-slate-800 rounded-xl shadow-lg overflow-hidden max-w-sm">
    <img src="/image.jpg" alt="Card image" class="w-full h-48 object-cover">
    <div class="p-6">
        <h3 class="text-white font-bold text-lg">Card Title</h3>
        <p class="text-slate-400 mt-2">
            Description goes here.
        </p>
    </div>
</div>

overflow-hidden on the card clips the image corners. object-cover on the image keeps the aspect ratio.

Clickable Card with Hover Effect

<a href="/post" class="block bg-slate-800 rounded-xl shadow-lg p-6 max-w-sm
    transition-all duration-300
    hover:shadow-xl hover:-translate-y-1 hover:border hover:border-blue-500/50">
    <h3 class="text-white font-bold text-lg">Card Title</h3>
    <p class="text-slate-400 mt-2">Hover over me.</p>
</a>

• transition-all duration-300 — smooth animation.
• hover:-translate-y-1 — lifts the card on hover.
• hover:shadow-xl — deepens the shadow.

Profile Card

<div class="bg-slate-800 rounded-xl shadow-lg p-6 max-w-sm text-center">
    <img src="/avatar.jpg" alt="User" class="w-20 h-20 rounded-full mx-auto object-cover">
    <h3 class="text-white font-bold text-lg mt-4">Jane Doe</h3>
    <p class="text-slate-400 text-sm">Frontend Developer</p>
    <div class="flex justify-center gap-3 mt-4">
        <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg text-sm transition">
            Follow
        </button>
        <button class="bg-slate-700 hover:bg-slate-600 text-white px-4 py-2 rounded-lg text-sm transition">
            Message
        </button>
    </div>
</div>

Note rounded-full for the avatar circle and mx-auto to center it.

Pricing Card

<div class="bg-slate-800 rounded-xl shadow-lg p-6 max-w-sm border-t-4 border-blue-500">
    <h3 class="text-white font-bold text-lg">Pro Plan</h3>
    <p class="text-slate-400 text-sm">For growing teams</p>

    <div class="mt-4 flex items-baseline gap-1">
        <span class="text-4xl font-black text-white">$29</span>
        <span class="text-slate-400">/month</span>
    </div>

    <ul class="mt-6 space-y-2 text-slate-300 text-sm">
        <li>✅ Unlimited projects</li>
        <li>✅ Priority support</li>
        <li>✅ Custom domain</li>
    </ul>

    <button class="w-full mt-6 bg-blue-500 hover:bg-blue-600 text-white py-2 rounded-lg transition">
        Get Started
    </button>
</div>

Note border-t-4 for the accent bar and w-full for the full-width button.

Card Grid (Responsive)

Arrange any of the above cards in a responsive grid:

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    <!-- Card 1 -->
    <div class="bg-slate-800 rounded-xl shadow-lg p-6">...</div>
    <!-- Card 2 -->
    <div class="bg-slate-800 rounded-xl shadow-lg p-6">...</div>
    <!-- Card 3 -->
    <div class="bg-slate-800 rounded-xl shadow-lg p-6">...</div>
</div>

1 column on mobile, 2 on tablet, 3 on desktop. This is the standard card grid pattern.