Tailwind CSS - lesson 3 | HackIndia Skills

Tailwind CSS - lesson 3 | HackIndia Skills | HackIndia

Example

Hero with flex

This is a common landing section for a college project. On a narrow screen, it stacks. On a wider screen, the text and preview sit side by side.

You will learn responsive prefixes in the next lesson. For now, notice how flex and gap do the main layout work.

<section className="mx-auto flex max-w-6xl flex-col gap-8 px-4 py-10 md:flex-row md:items-center md:justify-between">
  <div className="max-w-xl">
    <p className="text-sm font-medium text-blue-600">HackIndia project</p>
    <h1 className="mt-3 text-4xl font-bold tracking-tight text-slate-950">
      Track campus expenses without spreadsheets
    </h1>
    <p className="mt-4 text-slate-600">
      Split chai, auto, and hostel costs with friends. Settle with UPI later.
    </p>
    <div className="mt-6 flex flex-wrap gap-3">
      <button className="rounded-lg bg-blue-600 px-4 py-2 font-medium text-white">Try demo</button>
      <button className="rounded-lg border border-slate-300 px-4 py-2 font-medium text-slate-900">View repo</button>
    </div>
  </div>

  <div className="w-full max-w-md rounded-2xl border border-slate-200 bg-white p-4 shadow-sm">
    <div className="h-56 rounded-xl bg-slate-100"></div>
  </div>
</section>

Example

Project card grid

This pattern works for features, team members, events, products, or problem statements. The official Tailwind docs show the same idea with grid columns changing at breakpoints, such as grid-cols-3 md:grid-cols-4 lg:grid-cols-6.

<section className="mx-auto max-w-6xl px-4 py-10">
  <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
    {features.map((feature) => (
      <article className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
        <h2 className="text-lg font-semibold text-slate-950">{feature.title}</h2>
        <p className="mt-2 text-sm leading-6 text-slate-600">{feature.description}</p>
      </article>
    ))}
  </div>
</section>

Tip

Use AI carefully

You can ask ChatGPT, Gemini, or Claude to convert a messy section into Tailwind flex or grid. Paste only the component, not secrets or API keys.

Check the answer for three things: the parent has flex or grid, spacing uses gap where possible, and the layout does not rely on fixed pixel widths everywhere.

Prompt:
Rewrite this React section using Tailwind CSS v4 utilities.
Use flex for the hero layout and grid for the cards.
Keep the content the same.
Avoid custom CSS and avoid absolute positioning unless needed.

Build flex and grid layouts

Pick the layout job

Flex solves alignment

Hero with flex

Grid solves cards

Project card grid

Do not fight layout

Use AI carefully

Do this now

Quick check