Building a Card Component System

Cards are the most versatile UI component in modern web design — they appear as product listings, blog post previews, user profiles, dashboard stats, and pricing tiers. Tailwind makes it easy to build a flexible card system by composing utilities for surface color, border radius, shadow, padding, and internal layout. Because all styling is in the HTML, variants like horizontal cards, compact cards, and interactive cards require only class changes, not new CSS rules. A well-built card component separates visual concerns: the card shell handles the outer container styling (background, border, radius, shadow), the card media handles the image or icon area (aspect ratio, overflow hidden), the card body holds the text content with its own padding, and the card footer contains actions. This slot-based mental model maps cleanly to framework components in React, Vue, or Blade. Interactive cards that navigate on click need careful accessibility treatment. Using a stretched link pattern — positioning an absolutely-placed anchor inside a relative container — makes the entire card surface clickable while keeping the semantic HTML structure intact. Focus outlines should be visible, hover states should be clear, and the card should avoid nesting interactive elements inside an already-interactive container to prevent pointer-events conflicts.

Example

<!-- Vertical product card -->
<div class="bg-white rounded-2xl shadow-sm border border-gray-100
            hover:shadow-lg transition-shadow duration-300 overflow-hidden group">

  <!-- Media -->
  <div class="aspect-[4/3] overflow-hidden">
    <img src="product.jpg" alt="Product"
         class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
  </div>

  <!-- Body -->
  <div class="p-5">
    <span class="text-xs font-semibold uppercase tracking-wider text-blue-600">Electronics</span>
    <h3 class="mt-1 text-lg font-bold text-gray-900 line-clamp-2">
      Wireless Noise-Cancelling Headphones
    </h3>
    <p class="mt-2 text-sm text-gray-500 line-clamp-2">
      Premium 40-hour battery life, adaptive noise cancellation, and studio-quality sound.
    </p>
  </div>

  <!-- Footer -->
  <div class="px-5 pb-5 flex items-center justify-between">
    <div>
      <span class="text-2xl font-bold text-gray-900">$249</span>
      <span class="text-sm text-gray-400 line-through ml-2">$349</span>
    </div>
    <button class="bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium
                   px-4 py-2 rounded-lg transition-colors">
      Add to cart
    </button>
  </div>
</div>

<!-- Horizontal stat card for dashboard -->
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6
            flex items-center gap-4">
  <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center shrink-0">
    <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 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197"/>
    </svg>
  </div>
  <div>
    <p class="text-sm font-medium text-gray-500">Total Users</p>
    <p class="text-2xl font-bold text-gray-900">24,521</p>
    <p class="text-xs text-green-600 font-medium mt-0.5">↑ 12% from last month</p>
  </div>
</div>

HTML

Full Editor

Related Resources

Tailwind CSS Reference

Complete tag & property list

Tailwind CSS How-To Guides

Step-by-step practical guides

Tailwind CSS Exercises

Practice what you've learned