iwantcoding.com
🔥 Daily 👥 Rooms 🏆 Top Log in Sign up

Card Layouts

By · Reviewed & last updated · Part of Tailwind CSS Tutorial

A small library of card patterns built with Tailwind utility classes: media card, stat card, pricing card, profile card, and a feature comparison card. Copy and adapt; each takes < 80 lines, no custom CSS, and works in light + dark mode.

Five copy-paste card components

EXAMPLE
<!-- 1) Media card with badge + footer -->
<article class='group rounded-xl border bg-white shadow-sm transition hover:shadow-md
                 dark:border-slate-700 dark:bg-slate-900'>
  <div class='relative'>
    <img src='/wool-jacket.jpg' alt='Wool jacket'
         class='aspect-[4/3] w-full rounded-t-xl object-cover'>
    <span class='absolute left-3 top-3 rounded-full bg-emerald-500/90 px-2 py-0.5
                  text-xs font-medium text-white shadow'>New</span>
  </div>
  <div class='p-4'>
    <h3 class='text-base font-semibold tracking-tight'>Wool Jacket</h3>
    <p class='mt-1 text-sm text-slate-500 dark:text-slate-400'>
      Heavy-weight winter jacket with Merino lining.
    </p>
    <div class='mt-3 flex items-baseline justify-between'>
      <span class='text-lg font-semibold'>$199</span>
      <button class='rounded-lg bg-blue-600 px-3 py-1.5 text-sm text-white
                      transition hover:bg-blue-700'>Add to cart</button>
    </div>
  </div>
</article>

<!-- 2) Stat card -->
<div class='rounded-xl border bg-white p-5 dark:border-slate-700 dark:bg-slate-900'>
  <p class='text-sm font-medium text-slate-500 dark:text-slate-400'>Revenue (30d)</p>
  <div class='mt-2 flex items-baseline gap-2'>
    <span class='text-3xl font-semibold'>$48,950</span>
    <span class='inline-flex items-center rounded-full bg-emerald-100 px-2 py-0.5
                  text-xs font-medium text-emerald-700
                  dark:bg-emerald-900 dark:text-emerald-300'>+12.4%</span>
  </div>
  <p class='mt-3 text-xs text-slate-500'>vs previous period</p>
</div>

<!-- 3) Pricing card -->
<div class='relative rounded-xl border-2 border-blue-600 bg-white p-6 shadow-md
             dark:bg-slate-900'>
  <span class='absolute -top-3 left-6 rounded-full bg-blue-600 px-2 py-0.5
                text-xs font-semibold uppercase tracking-wide text-white'>Popular</span>
  <h3 class='text-lg font-semibold'>Pro</h3>
  <p class='mt-1 text-sm text-slate-500'>Up to 50 team members</p>
  <p class='mt-4'>
    <span class='text-4xl font-semibold'>$49</span>
    <span class='text-sm text-slate-500'>/ user / month</span>
  </p>
  <ul class='mt-4 space-y-2 text-sm'>
    <li class='flex gap-2'><span aria-hidden>✓</span> Unlimited projects</li>
    <li class='flex gap-2'><span aria-hidden>✓</span> Priority support</li>
    <li class='flex gap-2'><span aria-hidden>✓</span> SSO + audit log</li>
  </ul>
  <button class='mt-6 w-full rounded-lg bg-blue-600 px-3 py-2 text-sm font-medium
                  text-white transition hover:bg-blue-700'>Start trial</button>
</div>

<!-- 4) Profile card -->
<div class='rounded-xl border bg-white p-5 dark:border-slate-700 dark:bg-slate-900'>
  <div class='flex items-center gap-3'>
    <img src='/alice.jpg' alt='' class='h-12 w-12 rounded-full object-cover'>
    <div>
      <p class='font-semibold'>Alice Chen</p>
      <p class='text-sm text-slate-500'>Engineering Manager</p>
    </div>
    <button class='ml-auto rounded-lg border px-3 py-1.5 text-sm transition
                    hover:bg-slate-50 dark:border-slate-700 dark:hover:bg-slate-800'>
      Follow
    </button>
  </div>
  <p class='mt-3 text-sm text-slate-600 dark:text-slate-300'>
    Building reliable distributed systems. Big fan of small commits.
  </p>
</div>

<!-- 5) Feature comparison card -->
<div class='rounded-xl border bg-white dark:border-slate-700 dark:bg-slate-900'>
  <div class='border-b p-4 dark:border-slate-700'>
    <h3 class='font-semibold'>What is included?</h3>
    <p class='text-sm text-slate-500'>The same on every plan</p>
  </div>
  <ul class='divide-y dark:divide-slate-700'>
    <li class='flex items-start gap-3 p-4'>
      <span class='mt-0.5 inline-flex h-6 w-6 items-center justify-center
                    rounded-full bg-blue-100 text-blue-600
                    dark:bg-blue-900 dark:text-blue-300'>★</span>
      <div>
        <p class='font-medium'>Daily backups</p>
        <p class='text-sm text-slate-500'>Off-site, encrypted, 30 day retention.</p>
      </div>
    </li>
    <li class='flex items-start gap-3 p-4'>
      <span class='mt-0.5 inline-flex h-6 w-6 items-center justify-center
                    rounded-full bg-blue-100 text-blue-600
                    dark:bg-blue-900 dark:text-blue-300'>★</span>
      <div>
        <p class='font-medium'>99.9% uptime SLA</p>
        <p class='text-sm text-slate-500'>Status page + monthly report.</p>
      </div>
    </li>
  </ul>
</div>

Why it matters

Pair `rounded-xl border bg-white dark:bg-slate-900 dark:border-slate-700` on the card root and you have the boring-but-correct base for any card. The remaining design choices — image aspect, padding, button colour — slot in on top without fighting dark mode or focus rings. Copy this base, customise the contents, and your design system stays consistent for free.

Tip: Tweak the snippet with Try it Yourself », then sit the quiz at the bottom of the page.

Example

Example
<div class="rounded-xl border bg-white p-6 shadow-sm hover:shadow-md transition">…</div>
Try it Yourself »

Discussion

Loading…