Exercise: style the React UI (Tailwind)

Goal

Take the React exercise UI and make it look clean, consistent, and responsive using Tailwind.

Requirements

• Layout:
  • Looks good on mobile and desktop (use responsive classes)
  • Max width + centered content on large screens
• Form:
  • Clear label/input spacing
  • Error states are visually distinct (color + text)
  • Disabled/loading submit state is visually distinct
• List:
  • Items are readable and visually grouped (card/list row)
  • Empty state looks intentional (not just “nothing here”)

Acceptance criteria (entry)

• Uses Tailwind utilities (no custom CSS unless absolutely needed).
• Has at least 1 responsive breakpoint adjustment.
• Error, disabled, and focus states are clearly visible.

Stretch goals (mid)

• Extract a small set of reusable UI primitives:
  • Button (variants: primary/secondary, disabled/loading)
  • Input (with error + helper text)
• Ensure consistent spacing scale (avoid random spacing values).

Stretch goals (senior)

• Propose a minimal design token approach (Tailwind config vs conventions).
• Define “when to introduce a component library primitive vs inline classes”.