UI/UX - lesson 2 | HackIndia Skills

UI/UX - lesson 2 | HackIndia Skills | HackIndia

Example

Tailwind example

This card uses repeated spacing values. The title, text, input, and button share one left edge. The button is not floating randomly.

Use the same idea in React, Next.js, plain HTML, Flutter, or Figma.

<div className="max-w-md p-6 space-y-6 rounded-xl border bg-white">
  <div className="space-y-2">
    <h2 className="text-xl font-semibold">Create study group</h2>
    <p className="text-sm text-gray-600">
      Add your college, subject, and preferred time.
    </p>
  </div>

  <div className="space-y-4">
    <label className="block space-y-1">
      <span className="text-sm font-medium">Subject</span>
      <input className="w-full rounded-md border px-3 py-2" />
    </label>

    <button className="w-full rounded-md bg-black px-4 py-2 text-white">
      Create group
    </button>
  </div>
</div>

Fix spacing and alignment

One spacing rule

Why it matters

Use a spacing scale

Random gaps

Align the edges

Use AI lightly

Tailwind example

Do this now

Quick check