Landing hero with glow.

The component#

html
<section class="relative overflow-hidden bg-slate-950 py-32 text-center text-white"><div class="absolute left-1/2 top-0 size-[600px] -translate-x-1/2 rounded-full bg-blue-600/30 blur-3xl"></div><div class="relative"><h1 class="text-5xl font-bold">Build faster</h1><a class="mt-8 inline-block rounded-xl bg-blue-600 px-6 py-3 font-semibold">Start</a></div></section>

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