Hero Sections
Gradient spotlight
Dark hero with a radial glow
Dark hero with a radial glow
Create a dark hero section with Tailwind CSS on a near-black background with a soft radial gradient glow behind the headline. Centered content: a bordered pill, a large white headline with a gradient-text accent word, a light-gray subheading, and a single glowing CTA. Add faint grid or noise feel via subtle borders only (no images). <section class="relative overflow-hidden bg-neutral-950 py-28">
<div class="pointer-events-none absolute left-1/2 top-0 h-96 w-96 -translate-x-1/2 rounded-full bg-indigo-500/30 blur-3xl"></div>
<div class="relative mx-auto max-w-3xl px-6 text-center">
<span class="inline-block rounded-full border border-white/15 px-3 py-1 text-sm text-neutral-300">Now in public beta</span>
<h1 class="mt-6 text-5xl font-semibold tracking-tight text-white sm:text-6xl">
The future is <span class="bg-gradient-to-r from-indigo-400 to-pink-400 bg-clip-text text-transparent">already here</span>
</h1>
<p class="mx-auto mt-5 max-w-xl text-lg text-neutral-400">Build, deploy, and scale on infrastructure that gets out of your way.</p>
<a href="#" class="mt-8 inline-block rounded-xl bg-white px-6 py-3 text-sm font-medium text-neutral-900 shadow-lg shadow-indigo-500/20 hover:bg-neutral-100">Get early access</a>
</div>
</section>