Card Component Color Patterns in Tailwind CSS

Card Color Fundamentals

Cards separate content into digestible chunks. Color distinguishes card types, highlights importance, and creates visual depth. A good card system uses consistent background, border, and text color patterns.

Standard Card Variants

<!-- Default card -->
<div class="bg-white border border-slate-200 rounded-xl p-6 shadow-sm">
  <h3 class="text-slate-900 font-semibold">Default Card</h3>
  <p class="text-slate-600 mt-2">Standard content card with subtle border.</p>
</div>

<!-- Highlighted card -->
<div class="bg-blue-50 border border-blue-200 rounded-xl p-6">
  <h3 class="text-blue-900 font-semibold">Featured</h3>
  <p class="text-blue-700 mt-2">Tinted background draws attention.</p>
</div>

<!-- Status card -->
<div class="bg-white border-l-4 border-emerald-500 rounded-lg p-6 shadow-sm">
  <h3 class="text-slate-900 font-semibold">Success</h3>
  <p class="text-slate-600 mt-2">Left border indicates status at a glance.</p>
</div>

Pricing Card with Highlight

<!-- Recommended plan -->
<div class="bg-blue-600 text-white rounded-xl p-8 shadow-xl ring-2 ring-blue-600">
  <span class="bg-blue-500 text-xs font-bold px-3 py-1 rounded-full">Most Popular</span>
  <h3 class="text-2xl font-bold mt-4">Pro Plan</h3>
  <p class="text-blue-100 mt-2">Everything you need to grow.</p>
  <p class="text-4xl font-bold mt-4">$29<span class="text-lg text-blue-200">/mo</span></p>
  <button class="w-full bg-white text-blue-600 font-bold py-3 rounded-lg mt-6 hover:bg-blue-50">
    Get Started
  </button>
</div>

Card Color Patterns

• Default: White background, slate-200 border, slate-900 heading, slate-600 body
• Highlighted: Brand-50 background, brand-200 border, brand-900 heading
• Inverted: Brand-600 background, white text for featured items
• Status: White background with colored left border (border-l-4) for quick scanning