Cards

Anatomy of a Card

A card is one of the most common UI patterns. In Tailwind, cards are built with simple utility combinations — no special component class needed.

Basic Card

<div class="bg-white rounded-lg shadow-md p-6 max-w-sm">
  <h3 class="text-lg font-bold text-gray-900">Card Title</h3>
  <p class="mt-2 text-gray-600">
    This is a basic card with rounded corners, a shadow, and padding.
  </p>
</div>

The key utilities: bg-white for background, rounded-lg for rounded corners, shadow-md for elevation, and p-6 for internal spacing.

Shadow Scale

Tailwind provides a range of box-shadow utilities:

Card with Image

<div class="bg-white rounded-xl shadow-lg overflow-hidden max-w-sm">
  <img src="https://picsum.photos/400/200" alt="Card image" class="w-full h-48 object-cover">
  <div class="p-6">
    <h3 class="text-xl font-bold text-gray-900">Beautiful Landscapes</h3>
    <p class="mt-2 text-gray-600 text-sm">
      Explore the world's most stunning natural wonders captured by photographers.
    </p>
    <a href="#" class="mt-4 inline-block text-indigo-600 font-semibold text-sm hover:text-indigo-800">
      Read more →
    </a>
  </div>
</div>

overflow-hidden ensures the image respects the card's rounded corners. object-cover makes the image fill its container while maintaining aspect ratio.

Horizontal Card

<div class="bg-white rounded-xl shadow-md flex flex-col sm:flex-row overflow-hidden max-w-2xl">
  <img src="https://picsum.photos/300/200" alt="Card image" class="w-full sm:w-48 h-48 sm:h-auto object-cover">
  <div class="p-6">
    <span class="text-xs font-semibold text-indigo-600 uppercase tracking-wide">Tutorial</span>
    <h3 class="mt-1 text-lg font-bold text-gray-900">Getting Started with Tailwind</h3>
    <p class="mt-2 text-gray-600 text-sm">
      Learn the fundamentals of utility-first CSS and start building modern websites.
    </p>
  </div>
</div>

Profile Card

<div class="bg-white rounded-2xl shadow-lg p-8 max-w-xs text-center">
  <img src="https://picsum.photos/100/100" alt="Avatar" class="w-20 h-20 rounded-full mx-auto object-cover ring-4 ring-indigo-100">
  <h3 class="mt-4 text-lg font-bold text-gray-900">Sarah Johnson</h3>
  <p class="text-sm text-indigo-600 font-medium">UI/UX Designer</p>
  <p class="mt-3 text-sm text-gray-500">
    Crafting delightful user experiences with a focus on accessibility and clean design.
  </p>
  <div class="mt-5 flex justify-center space-x-3">
    <a href="#" class="bg-indigo-600 text-white text-sm font-semibold px-4 py-2 rounded-lg hover:bg-indigo-700">Follow</a>
    <a href="#" class="border border-gray-300 text-gray-700 text-sm font-semibold px-4 py-2 rounded-lg hover:bg-gray-50">Message</a>
  </div>
</div>

Pricing Card

<div class="bg-white rounded-2xl shadow-xl p-8 max-w-sm border-2 border-indigo-500">
  <p class="text-sm font-semibold text-indigo-600 uppercase tracking-wide">Pro Plan</p>
  <div class="mt-4 flex items-baseline">
    <span class="text-5xl font-extrabold text-gray-900">$29</span>
    <span class="ml-1 text-xl text-gray-500">/month</span>
  </div>
  <ul class="mt-6 space-y-3">
    <li class="flex items-center text-sm text-gray-600">
      <span class="text-green-500 mr-2">✓</span> Unlimited projects
    </li>
    <li class="flex items-center text-sm text-gray-600">
      <span class="text-green-500 mr-2">✓</span> Priority support
    </li>
    <li class="flex items-center text-sm text-gray-600">
      <span class="text-green-500 mr-2">✓</span> Custom domains
    </li>
    <li class="flex items-center text-sm text-gray-600">
      <span class="text-green-500 mr-2">✓</span> Analytics dashboard
    </li>
  </ul>
  <button class="mt-8 w-full bg-indigo-600 text-white font-semibold py-3 rounded-lg hover:bg-indigo-700">
    Get Started
  </button>
</div>

Responsive Card Grid

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 p-6">
  <!-- Card 1 -->
  <div class="bg-white rounded-xl shadow-md overflow-hidden">
    <img src="https://picsum.photos/400/200?random=1" class="w-full h-44 object-cover" alt="">
    <div class="p-5">
      <h3 class="font-bold text-gray-900">Project Alpha</h3>
      <p class="mt-2 text-sm text-gray-500">A modern web application built with React and Tailwind.</p>
    </div>
  </div>

  <!-- Card 2 -->
  <div class="bg-white rounded-xl shadow-md overflow-hidden">
    <img src="https://picsum.photos/400/200?random=2" class="w-full h-44 object-cover" alt="">
    <div class="p-5">
      <h3 class="font-bold text-gray-900">Project Beta</h3>
      <p class="mt-2 text-sm text-gray-500">A mobile-first e-commerce platform with dark mode.</p>
    </div>
  </div>

  <!-- Card 3 -->
  <div class="bg-white rounded-xl shadow-md overflow-hidden">
    <img src="https://picsum.photos/400/200?random=3" class="w-full h-44 object-cover" alt="">
    <div class="p-5">
      <h3 class="font-bold text-gray-900">Project Gamma</h3>
      <p class="mt-2 text-sm text-gray-500">An analytics dashboard with real-time data visualization.</p>
    </div>
  </div>
</div>

Recap

• Cards are built from basic utilities: bg-white, rounded-*, shadow-*, p-*.
• overflow-hidden clips images to fit the card's border radius.
• object-cover ensures images fill their container without distortion.
• Combine with grid or flex for responsive card layouts.
• No special .card class needed — just utility composition!

Next, we will learn how to create badges and pill-style labels.