Layout

Container

Ancho máximo de max-w-7xl (80rem / 1280px) con padding horizontal responsivo.

<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
  {/* Contenido */}
</div>

Estructura de página

// Layout base para landing pages
<>
  <Header />
  <main>
    <HeroSection />
    <section className="py-24">...</section>
    <section className="py-24">...</section>
  </main>
  <Footer />
</>

// Layout base para apps/dashboards
<div className="flex min-h-screen">
  <Sidebar />
  <main className="flex-1 ml-64 p-8">
    {children}
  </main>
</div>

Secciones

Cada sección lleva padding vertical generoso y un contenedor centrado:

<section id="services" className="relative py-24 overflow-hidden">
  <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    {/* Label */}
    <Badge variant="brand" dot>Servicios</Badge>
    
    {/* Heading */}
    <h2 className="mt-4 text-4xl font-bold text-white">
      Título de sección
    </h2>
    
    {/* Subheading */}
    <p className="mt-4 max-w-2xl text-lg text-zinc-400">
      Descripción breve de la sección.
    </p>
    
    {/* Content grid */}
    <div className="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
      ...
    </div>
  </div>
</section>

Breakpoints