Two panes sharing the viewport — auth pages, comparisons.

The pattern#

html
<main class="grid min-h-screen md:grid-cols-2">
  <section class="p-12">form</section>
  <section class="hidden md:block bg-slate-950">brand</section>
</main>

Responsive behavior#

Every pattern here is breakpoint-agnostic at its core — add sm:/md:/lg: prefixes to the grid/flex containers to tune when it collapses. Because the primitives are utilities, responsiveness is a prefix, never a rewrite.

When to use#

  • Auth pages
  • Onboarding
  • Before/after

patterns/index|All patterns · utilities/grid/grid-template-columns|Grid · utilities/flexbox/flex-direction|Flexbox