Hero Sections

14 components. Change theme and colors above each preview, then copy the code below.

Theme & colors

Apply to all previews below.

Theme

Primary

Custom

Accent

Custom

Centered with badge

Hero section variant 1. Copy the code and use anywhere.

Open source

Build something great together

Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo.

Get started Learn more

Code

<section class="hero-1 relative isolate overflow-hidden bg-white px-6 py-24 dark:bg-gray-950 sm:py-32 lg:px-8">
  <div class="hero-1-content mx-auto max-w-2xl text-center">
    <span class="inline-flex items-center rounded-full bg-indigo-500/10 px-4 py-1.5 text-sm font-medium text-indigo-600 ring-1 ring-inset ring-indigo-500/20 dark:text-indigo-400 dark:ring-indigo-400/30">Open source</span>
    <h1 class="mt-4 text-4xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-6xl">Build something great together</h1>
    <p class="mt-6 text-lg leading-8 text-gray-600 dark:text-gray-300">Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo.</p>
    <div class="mt-10 flex items-center justify-center gap-x-6">
      <a href="#" class="rounded-full bg-gray-900 px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900 dark:bg-white dark:text-gray-900 dark:hover:bg-gray-100 transition-colors duration-200">Get started</a>
      <a href="#" class="text-sm font-semibold leading-6 text-gray-900 dark:text-white transition-colors duration-200 hover:opacity-80">Learn more <span aria-hidden="true">→</span></a>
    </div>
  </div>
</section>
<style>
  .hero-1-content {
    animation: hero-1-fade-in 0.6s ease-out forwards;
  }
  @keyframes hero-1-fade-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
  }
</style>

Split with CTA

Hero section variant 2. Copy the code and use anywhere.

Ship faster with our platform

Build and ship in days, not months. Everything you need to launch and scale — no lock-in.

Start free trial Watch demo

Preview

Code

<section class="bg-white dark:bg-gray-950">
  <div class="relative isolate overflow-hidden px-6 py-24 lg:overflow-visible lg:px-0">
    <div class="mx-auto grid max-w-2xl grid-cols-1 gap-16 px-8 lg:mx-0 lg:max-w-none lg:grid-cols-2 lg:gap-y-16 lg:px-8">
      <div class="lg:col-span-2 lg:col-start-1 lg:row-start-1 lg:px-8 lg:pt-8">
        <h1 class="text-4xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-5xl">Ship faster with our platform</h1>
        <p class="mt-6 text-lg leading-8 text-gray-600 dark:text-gray-300">Build and ship in days, not months. Everything you need to launch and scale — no lock-in.</p>
        <div class="mt-10 flex gap-x-6">
          <a href="#" class="rounded-full bg-indigo-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 dark:bg-indigo-500 dark:hover:bg-indigo-400">Start free trial</a>
          <a href="#" class="text-sm font-semibold leading-6 text-gray-900 dark:text-white">Watch demo <span aria-hidden="true">→</span></a>
        </div>
      </div>
      <div class="flex items-center justify-end lg:col-span-2 lg:col-start-2 lg:row-start-1 lg:px-8">
        <div class="w-full max-w-lg rounded-xl bg-gray-100 dark:bg-gray-800 aspect-video flex items-center justify-center text-gray-400 dark:text-gray-500 text-sm">Preview</div>
      </div>
    </div>
  </div>
</section>

Minimal headline

Hero section variant 3. Copy the code and use anywhere.

One line that says it all

Supporting line that adds clarity or context.

Get started

Code

<section class="py-24 sm:py-32">
  <div class="mx-auto max-w-3xl px-6 text-center lg:px-8">
    <h1 class="text-5xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-6xl">One line that says it all</h1>
    <p class="mt-6 text-lg leading-8 text-gray-600 dark:text-gray-300">Supporting line that adds clarity or context.</p>
    <a href="#" class="mt-10 inline-block rounded-full bg-gray-900 px-5 py-2.5 text-sm font-semibold text-white hover:bg-gray-800 dark:bg-white dark:text-gray-900 dark:hover:bg-gray-100">Get started</a>
  </div>
</section>

Gradient background

Hero section variant 4. Copy the code and use anywhere.

Beautiful gradient hero

Stand out with a bold gradient. Fully responsive and accessible.

Get started Learn more

Code

<section class="hero-4 relative overflow-hidden bg-gradient-to-br from-indigo-600 to-purple-800 px-6 py-24 dark:from-indigo-800 dark:to-purple-900 sm:py-32">
  <div class="hero-4-content relative mx-auto max-w-2xl text-center">
    <h1 class="text-4xl font-bold tracking-tight text-white sm:text-5xl">Beautiful gradient hero</h1>
    <p class="mt-6 text-lg leading-8 text-indigo-100">Stand out with a bold gradient. Fully responsive and accessible.</p>
    <div class="mt-10 flex justify-center gap-x-4">
      <a href="#" class="rounded-full bg-white px-4 py-2.5 text-sm font-semibold text-indigo-600 shadow-sm hover:bg-indigo-50 transition-colors duration-200">Get started</a>
      <a href="#" class="rounded-full bg-white/10 px-4 py-2.5 text-sm font-semibold text-white ring-1 ring-inset ring-white/20 hover:bg-white/20 transition-colors duration-200">Learn more</a>
    </div>
  </div>
</section>
<style>
  .hero-4-content {
    animation: hero-4-fade-in 0.6s ease-out forwards;
  }
  @keyframes hero-4-fade-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
  }
</style>

With stats row

Hero section variant 5. Copy the code and use anywhere.

Trusted by teams everywhere

Join thousands of teams who ship faster with our tools.

10k+

Active users

99.9%

Uptime

24/7

Support

Get started

Code

<section class="bg-white dark:bg-gray-950 py-24 sm:py-32">
  <div class="mx-auto max-w-7xl px-6 lg:px-8">
    <div class="mx-auto max-w-2xl text-center">
      <h1 class="text-4xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-5xl">Trusted by teams everywhere</h1>
      <p class="mt-6 text-lg leading-8 text-gray-600 dark:text-gray-300">Join thousands of teams who ship faster with our tools.</p>
    </div>
    <div class="mx-auto mt-16 grid max-w-3xl grid-cols-3 gap-8 text-center">
      <div>
        <p class="text-3xl font-bold text-indigo-600 dark:text-indigo-400">10k+</p>
        <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">Active users</p>
      </div>
      <div>
        <p class="text-3xl font-bold text-indigo-600 dark:text-indigo-400">99.9%</p>
        <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">Uptime</p>
      </div>
      <div>
        <p class="text-3xl font-bold text-indigo-600 dark:text-indigo-400">24/7</p>
        <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">Support</p>
      </div>
    </div>
    <div class="mt-12 flex justify-center">
      <a href="#" class="rounded-full bg-gray-900 px-4 py-2.5 text-sm font-semibold text-white hover:bg-gray-800 dark:bg-white dark:text-gray-900 dark:hover:bg-gray-100">Get started</a>
    </div>
  </div>
</section>

Side-by-side image

Hero section variant 6. Copy the code and use anywhere.

Everything you need to launch

From idea to production in one place. No context switching.

Start building

Image

Code

<section class="hero-6 bg-white dark:bg-gray-950">
  <div class="mx-auto max-w-7xl px-6 py-24 lg:flex lg:items-center lg:gap-x-10 lg:px-8 lg:py-32">
    <div class="hero-6-text lg:w-1/2">
      <h1 class="text-4xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-5xl">Everything you need to launch</h1>
      <p class="mt-6 text-lg leading-8 text-gray-600 dark:text-gray-300">From idea to production in one place. No context switching.</p>
      <a href="#" class="mt-8 inline-block rounded-full bg-gray-900 px-4 py-2.5 text-sm font-semibold text-white hover:bg-gray-800 dark:bg-white dark:text-gray-900 dark:hover:bg-gray-100 transition-colors duration-200">Start building</a>
    </div>
    <div class="hero-6-image mt-16 lg:mt-0 lg:w-1/2">
      <div class="aspect-square rounded-2xl bg-gray-100 dark:bg-gray-800 flex items-center justify-center text-gray-400 dark:text-gray-500">Image</div>
    </div>
  </div>
</section>
<style>
  .hero-6-text {
    animation: hero-6-fade-in 0.6s ease-out forwards;
  }
  .hero-6-image {
    animation: hero-6-fade-in 0.6s ease-out 0.15s both;
  }
  @keyframes hero-6-fade-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
  }
</style>

Large badge + headline

Hero section variant 7. Copy the code and use anywhere.

New release

The future of work is here

One platform for your entire team. Collaborate, ship, and iterate faster.

Try free View docs

Code

<section class="relative isolate px-6 py-24 dark:bg-gray-950 sm:py-32 lg:px-8">
  <span class="inline-block rounded-full bg-gray-900 px-4 py-1.5 text-sm font-medium text-white dark:bg-white dark:text-gray-900">New release</span>
  <h1 class="mt-4 text-5xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-6xl lg:text-7xl">The future of work is here</h1>
  <p class="mt-6 max-w-2xl text-lg leading-8 text-gray-600 dark:text-gray-300">One platform for your entire team. Collaborate, ship, and iterate faster.</p>
  <div class="mt-10 flex flex-wrap gap-4">
    <a href="#" class="rounded-full bg-gray-900 px-5 py-2.5 text-sm font-semibold text-white hover:bg-gray-800 dark:bg-white dark:text-gray-900 dark:hover:bg-gray-100">Try free</a>
    <a href="#" class="rounded-full border border-gray-300 px-5 py-2.5 text-sm font-semibold text-gray-900 hover:bg-gray-50 dark:border-gray-600 dark:text-white dark:hover:bg-gray-800">View docs</a>
  </div>
</section>

Bordered card style

Hero section variant 8. Copy the code and use anywhere.

Card-style hero

Contained in a card for a clean, focused look. Works in light and dark.

Get started

Code

<section class="px-6 py-24 sm:py-32">
  <div class="mx-auto max-w-3xl">
    <div class="rounded-2xl border border-gray-200 bg-white p-12 shadow-sm dark:border-gray-700 dark:bg-gray-900 sm:p-16">
      <h1 class="text-4xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-5xl">Card-style hero</h1>
      <p class="mt-6 text-lg leading-8 text-gray-600 dark:text-gray-300">Contained in a card for a clean, focused look. Works in light and dark.</p>
      <a href="#" class="mt-8 inline-block rounded-full bg-gray-900 px-4 py-2.5 text-sm font-semibold text-white hover:bg-gray-800 dark:bg-white dark:text-gray-900 dark:hover:bg-gray-100">Get started</a>
    </div>
  </div>
</section>

Dark block

Hero section variant 9. Copy the code and use anywhere.

Built for dark mode

This block is always dark. Use it for impact or as a section divider.

Get started

Code

<section class="bg-gray-900 dark:bg-gray-950 px-6 py-24 sm:py-32">
  <div class="mx-auto max-w-2xl text-center">
    <h1 class="text-4xl font-bold tracking-tight text-white sm:text-5xl">Built for dark mode</h1>
    <p class="mt-6 text-lg leading-8 text-gray-300">This block is always dark. Use it for impact or as a section divider.</p>
    <a href="#" class="mt-10 inline-block rounded-full bg-white px-4 py-2.5 text-sm font-semibold text-gray-900 hover:bg-gray-100">Get started</a>
  </div>
</section>

With form

Hero section variant 10. Copy the code and use anywhere.

Get early access

Join the waitlist. No spam, unsubscribe anytime.

Code

<section class="bg-white dark:bg-gray-950 py-24 sm:py-32">
  <div class="mx-auto max-w-xl px-6 text-center lg:px-8">
    <h1 class="text-4xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-5xl">Get early access</h1>
    <p class="mt-6 text-lg leading-8 text-gray-600 dark:text-gray-300">Join the waitlist. No spam, unsubscribe anytime.</p>
    <form class="mt-10 flex flex-col gap-3 sm:flex-row sm:justify-center">
      <input type="email" placeholder="you@example.com" class="min-w-0 flex-auto rounded-full border border-gray-300 bg-white px-4 py-2.5 text-gray-900 placeholder:text-gray-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 dark:border-gray-600 dark:bg-gray-900 dark:text-white dark:placeholder:text-gray-500" />
      <button type="submit" class="rounded-full bg-gray-900 px-4 py-2.5 text-sm font-semibold text-white hover:bg-gray-800 dark:bg-white dark:text-gray-900 dark:hover:bg-gray-100">Notify me</button>
    </form>
  </div>
</section>

Two-column asymmetric

Hero section variant 11. Copy the code and use anywhere.

Asymmetric layout

Two columns with different weights. Left takes more space for copy.

Get started

Visual

Code

<section class="bg-white dark:bg-gray-950">
  <div class="mx-auto max-w-7xl px-6 py-24 lg:grid lg:grid-cols-12 lg:gap-x-8 lg:px-8 lg:py-32">
    <div class="lg:col-span-7">
      <h1 class="text-4xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-5xl">Asymmetric layout</h1>
      <p class="mt-6 text-lg leading-8 text-gray-600 dark:text-gray-300">Two columns with different weights. Left takes more space for copy.</p>
      <a href="#" class="mt-8 inline-block rounded-full bg-gray-900 px-4 py-2.5 text-sm font-semibold text-white hover:bg-gray-800 dark:bg-white dark:text-gray-900 dark:hover:bg-gray-100">Get started</a>
    </div>
    <div class="mt-16 lg:col-span-5 lg:mt-0">
      <div class="rounded-2xl bg-gray-100 dark:bg-gray-800 aspect-[4/3] flex items-center justify-center text-gray-400 dark:text-gray-500">Visual</div>
    </div>
  </div>
</section>

Floating elements

Hero section variant 12. Copy the code and use anywhere.

Floating gradient accent

Soft blur in the background adds depth without distraction.

Get started

Code

<section class="hero-12 relative overflow-hidden bg-white px-6 py-24 dark:bg-gray-950 sm:py-32">
  <div class="absolute inset-0 -z-10">
    <div class="absolute left-1/2 top-0 -translate-x-1/2 rounded-full bg-indigo-500/10 blur-3xl w-[600px] h-[600px]"></div>
  </div>
  <div class="hero-12-content relative mx-auto max-w-2xl text-center">
    <h1 class="text-4xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-5xl">Floating gradient accent</h1>
    <p class="mt-6 text-lg leading-8 text-gray-600 dark:text-gray-300">Soft blur in the background adds depth without distraction.</p>
    <a href="#" class="mt-10 inline-block rounded-full bg-indigo-600 px-4 py-2.5 text-sm font-semibold text-white hover:bg-indigo-500 dark:bg-indigo-500 dark:hover:bg-indigo-400 transition-colors duration-200">Get started</a>
  </div>
</section>
<style>
  .hero-12-content {
    animation: hero-12-fade-in 0.6s ease-out forwards;
  }
  @keyframes hero-12-fade-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
  }
</style>

Left-aligned compact

Hero section variant 13. Copy the code and use anywhere.

Ship your best work

A compact, left-aligned hero. Perfect for product or docs.

Get started Documentation

Code

<section class="hero-13 bg-white dark:bg-gray-950 px-6 py-20 sm:py-28">
  <div class="mx-auto max-w-3xl">
    <div class="hero-13-content">
      <h1 class="text-3xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-4xl">Ship your best work</h1>
      <p class="mt-4 text-lg text-gray-600 dark:text-gray-300">A compact, left-aligned hero. Perfect for product or docs.</p>
      <div class="mt-8 flex flex-wrap gap-4">
        <a href="#" class="rounded-full bg-gray-900 px-4 py-2.5 text-sm font-semibold text-white hover:bg-gray-800 dark:bg-white dark:text-gray-900 dark:hover:bg-gray-100 transition-colors duration-200">Get started</a>
        <a href="#" class="rounded-full border border-gray-300 px-4 py-2.5 text-sm font-semibold text-gray-900 hover:bg-gray-50 dark:border-gray-600 dark:text-white dark:hover:bg-gray-800 transition-colors duration-200">Documentation</a>
      </div>
    </div>
  </div>
</section>
<style>
  .hero-13-content {
    animation: hero-13-fade-in 0.5s ease-out forwards;
  }
  @keyframes hero-13-fade-in {
    from { opacity: 0; transform: translateX(-12px); }
    to { opacity: 1; transform: translateX(0); }
  }
</style>

Centered minimal with underline

Hero section variant 14. Copy the code and use anywhere.

Simple by design

A minimal hero with soft background. Copy-paste and customize.

Learn more

Code

<section class="hero-14 bg-gray-50 dark:bg-gray-900/50 py-24 sm:py-32">
  <div class="mx-auto max-w-2xl px-6 text-center">
    <div class="hero-14-content">
      <h1 class="text-4xl font-bold text-gray-900 dark:text-white sm:text-5xl">Simple by design</h1>
      <p class="mt-4 text-gray-600 dark:text-gray-300">A minimal hero with soft background. Copy-paste and customize.</p>
      <a href="#" class="mt-8 inline-block border-b-2 border-gray-900 pb-1 text-sm font-semibold text-gray-900 hover:border-gray-600 dark:border-white dark:text-white dark:hover:border-gray-300 transition-colors duration-200">Learn more</a>
    </div>
  </div>
</section>
<style>
  .hero-14-content {
    animation: hero-14-fade-in 0.5s ease-out forwards;
  }
  @keyframes hero-14-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }
</style>