Tailwind CSS - lesson 4 | HackIndia Skills

Tailwind CSS - lesson 4 | HackIndia Skills | HackIndia

Example

Responsive card grid

This layout is safe for a hackathon project page. It starts as one column, becomes two on medium screens, and three on large screens.

Use the same pattern for features, team members, startup ideas, events, or dashboard cards.

<section className="mx-auto max-w-6xl px-4 py-8 sm:px-6 lg:px-8">
  <div className="mb-6 max-w-2xl">
    <p className="text-sm font-medium text-blue-600">Campus payments</p>
    <h1 className="mt-2 text-3xl font-bold tracking-tight text-slate-950 sm:text-4xl">
      Split canteen bills without confusion
    </h1>
    <p className="mt-3 text-base text-slate-600 sm:text-lg">
      Track who paid, who owes, and settle later with UPI.
    </p>
  </div>

  <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
    <div className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
      <h2 className="font-semibold text-slate-950">Add expenses</h2>
      <p className="mt-2 text-sm text-slate-600">Log chai, snacks, printing, or cab costs.</p>
    </div>
    <div className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
      <h2 className="font-semibold text-slate-950">See balances</h2>
      <p className="mt-2 text-sm text-slate-600">Know who owes what before leaving campus.</p>
    </div>
    <div className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm sm:col-span-2 lg:col-span-1">
      <h2 className="font-semibold text-slate-950">Settle later</h2>
      <p className="mt-2 text-sm text-slate-600">Keep a clean record for your group.</p>
    </div>
  </div>
</section>

Make it responsive first

Mobile first

Why it matters

Set the viewport

Responsive card grid

Do not stack breakpoints

Test four widths

Use AI carefully

Do this now

Quick check