Full page bones.

The component#

html
<body><header class="sticky top-0 border-b">nav</header><main><section class="py-24 text-center">hero</section><section class="border-y bg-slate-50 py-16">features</section><section class="py-16">pricing</section><section class="border-t py-16">faq</section><section class="bg-slate-900 py-16 text-white text-center">cta</section></main><footer class="border-t py-12">footer</footer></body>

Responsive & dark#

Add dark: twins to every surface and text color (bg-white dark:bg-slate-900, border-slate-200 dark:border-slate-800). Because this recipe is pure utilities, dark mode is a per-class decision — see concepts/dark-mode-strategies|dark mode strategies.

Customization#

  • Swap palette classes to re-theme instantly
  • Adjust radii (rounded-lg → rounded-2xl) for tone
  • Add transition + state variants for polish
  • Extract into a framework component when reused 3+ times

recipes/index|Recipe index · components/index|Design components