1. Section

Defines one page “block” and controls vertical spacing (and often background).

Typical Tailwind classes:

• Vertical spacing: py-16, py-20, pt-16 pb-24, space-y-12 (when stacking sections)
• Background: bg-gray-50, bg-white, bg-neutral-950
• Optional: min-h-screen (full screen section), overflow-hidden (hide decorative overflow)

2. Wrapper div

Controls max width, center alignment, and side padding so content does not stretch too wide.

Typical Tailwind classes:

• Standard: max-w-6xl mx-auto px-6
• Responsive padding: px-6 md:px-8 lg:px-12
• Wider page: max-w-7xl
• Text-heavy page: max-w-3xl or max-w-4xl

max-w-3xl is considered text-heavy because its narrower width keeps line length short, which improves readability for paragraphs and long-form content.
max-w-7xl is wider because it allows more horizontal space, making it better suited for layouts with grids, cards, dashboards, or visual-heavy sections rather than dense text.

Or the user can use Tailwind default class – container

Tailwind default container

Default properties:

• width: 100%
• max-width: changes at breakpoints
  • sm: 640px
  • md: 768px
  • lg: 1024px
  • xl: 1280px
  • 2xl: 1536px
• margin-left / margin-right: auto (centers the container)
• padding: 0 by default (padding must be added manually with px-*)

3. Component div

Implements the real UI and controls internal spacing (gap, grid, workflow layout).

Typical Tailwind classes:

Layout: flex flex-col, grid md:grid-cols-2

Card shell: rounded-2xl, border, shadow-sm, bg-white

Padding: p-6, p-8

Spacing inside: space-y-4, gap-6, grid gap-6, flex gap-4

space-y-4 adds vertical spacing between direct children only in a column layout and is implemented via margins.
gap is a layout-level property for flex or grid containers, controlling spacing in both row and column directions, and is generally preferred for modern, symmetric layouts.