Hero Section Design: 8 Layouts With Full React + Tailwind Code

Why Your Hero Section Is The Only Thing That Actually Matters

You've got somewhere between 3 and 8 seconds. That's it. After that, users have made their decision and either your hero pulled them in or they're gone. No amount of clever footer copy or beautiful pricing table is going to fix a weak above-the-fold experience.

The hero section isn't just a banner — it's your pitch, your visual identity, and your CTA all compressed into a single viewport. In 2024, users started scanning faster and judging harder, and that trend has only accelerated. If the layout feels generic or the hierarchy is broken, people don't consciously notice the problem; they just feel vaguely unimpressed and close the tab.

Honestly, most hero sections fail at one of three things: unclear headline hierarchy, a CTA that's buried or visually competing with other elements, or a background that looks like a stock photo graveyard. These aren't hard problems to fix — but you do need to make intentional decisions, not just drag components around until it 'looks fine'.

Worth noting: the 8 layouts below aren't just visual patterns. Each one solves a specific product positioning problem. Pick based on what you're communicating, not just what looks cool.

The 8 Hero Layout Patterns (And When To Use Each)

These patterns cover the vast majority of landing pages you'll ever build. They range from the dead-simple centered layout that's been working since 2012 to more opinionated split-screen and glassmorphic approaches. Each has a context where it genuinely outperforms the others.

1. Centered Minimal — One headline, one subtext, one CTA. Works for SaaS products where the name is already known. No distractions, full focus on conversion. 2. Split-Screen — Content left, visual right (or flipped). Good for product-led companies with a strong UI screenshot or illustration. 3. Fullscreen Video Background — High emotion, low text. Agencies, creative studios, consumer brands. Not for B2B enterprise. 4. Gradient + Abstract Shape — Designer-friendly, works at any scale. You browse the components on Empire UI and you'll see this used in the aurora and vaporwave style systems constantly.

5. Glassmorphic Card Hero — A frosted-glass card floats over a blurred background. Trendy but purposeful when the product itself has depth. Head over to the glassmorphism components section for ready-built examples of this. 6. Asymmetric Grid — Text and visuals placed on a broken grid. High visual tension, works for design tools and creative platforms. 7. Announcement Banner + Hero — Sticky pill badge above the headline (think 'Now with AI'). SaaS staple in 2025-2026. 8. Dark Cinematic — Deep background, tight type, cinematic feel. Games, developer tools, security products.

In practice, layouts 1, 2, and 7 convert the best for direct-response landing pages. The rest are brand-first choices. Know the difference before you commit.

Centered Hero: The Code You'll Actually Use

This is the one you'll build most often. It's also the one most developers get wrong by padding it too aggressively or picking a font size that doesn't scale. Here's a version that works at every breakpoint, with a headline, a subheading, and a dual CTA pattern:

export function CenteredHero() {
  return (
    <section className="relative flex min-h-[90vh] flex-col items-center justify-center px-6 text-center">
      {/* Announcement pill */}
      <div className="mb-6 inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-4 py-1.5 text-sm text-white/70">
        <span className="h-1.5 w-1.5 rounded-full bg-emerald-400" />
        Now in public beta
      </div>

      {/* Headline */}
      <h1 className="max-w-3xl text-5xl font-bold tracking-tight text-white md:text-7xl">
        Build UIs that actually{" "}
        <span className="bg-gradient-to-r from-violet-400 to-cyan-400 bg-clip-text text-transparent">
          ship
        </span>
      </h1>

      {/* Subtext */}
      <p className="mt-6 max-w-xl text-lg text-white/60">
        A component library built for speed-obsessed developers.
        Drop in, customise, done.
      </p>

      {/* CTAs */}
      <div className="mt-10 flex flex-wrap items-center justify-center gap-4">
        <a
          href="/"
          className="rounded-lg bg-violet-600 px-6 py-3 text-sm font-semibold text-white transition hover:bg-violet-500"
        >
          Browse components
        </a>
        <a
          href="/docs"
          className="rounded-lg border border-white/10 px-6 py-3 text-sm font-semibold text-white/80 transition hover:border-white/30"
        >
          Read the docs →
        </a>
      </div>
    </section>
  );
}

A few decisions worth calling out: the min-h-[90vh] instead of 100vh leaves a sliver of the next section visible, which signals scrollability. The announcement pill uses a bg-white/5 background — that's 5% white opacity, just enough to be visible on dark backgrounds without being distracting. And the gradient text span uses bg-clip-text text-transparent, which has been fully supported across browsers since late 2022.

One more thing — the dual CTA pattern (primary filled + secondary ghost) consistently outperforms a single CTA in A/B tests for developer-facing products. Give users two exits: the one you want them to take, and a lower-commitment option.

Split-Screen Hero With Image Panel

Split-screen works because it separates the message from the evidence. Left side: your value prop. Right side: proof (a screenshot, an illustration, a demo video poster). Here's the Tailwind layout:

export function SplitHero() {
  return (
    <section className="grid min-h-screen grid-cols-1 lg:grid-cols-2">
      {/* Left: content */}
      <div className="flex flex-col justify-center px-10 py-24 lg:px-20">
        <span className="mb-4 text-sm font-medium uppercase tracking-widest text-violet-400">
          Design system
        </span>
        <h1 className="text-4xl font-bold text-white md:text-6xl">
          Every component,
          <br /> zero compromise.
        </h1>
        <p className="mt-5 max-w-md text-white/60">
          Stop rebuilding the same buttons and modals. Ship with
          production-quality components from day one.
        </p>
        <a
          href="/"
          className="mt-8 w-fit rounded-lg bg-white px-6 py-3 text-sm font-semibold text-black transition hover:bg-white/90"
        >
          Get started free
        </a>
      </div>

      {/* Right: image panel */}
      <div className="relative hidden overflow-hidden bg-[#0f0f14] lg:block">
        <img
          src="/hero-preview.png"
          alt="Component library preview"
          className="absolute inset-0 h-full w-full object-cover opacity-80"
        />
        {/* Subtle left-edge fade */}
        <div className="absolute inset-y-0 left-0 w-24 bg-gradient-to-r from-black to-transparent" />
      </div>
    </section>
  );
}

That left-edge gradient fade (24px wide, from-black to-transparent) is the detail that makes split-screen heroes feel polished. Without it, the seam between the content column and the image panel looks hard and cheap. Costs you three tokens of Tailwind to fix.

Quick aside: on mobile, the image panel is hidden via lg:block. Don't fight this. On a 390px screen the split layout doesn't work — just let the centered content breathe instead.

Glassmorphic Hero Card Layout

This layout places a frosted-glass card over a gradient or abstract background. It's polarising — some designers hate it, some love it. But when it fits the product (fintech dashboards, creative tools, anything with a 'premium' positioning), it genuinely converts.

The trick is getting the glass card right. Too much blur and it looks muddy. Too little and the frosted effect disappears. A backdrop-blur-xl with a bg-white/10 background and a border-white/20 border is the sweet spot for dark themes. You can generate and preview exact values with the glassmorphism generator before you hardcode anything.

export function GlassmorphicHero() {
  return (
    <section
      className="relative flex min-h-screen items-center justify-center overflow-hidden"
      style={{
        background: "radial-gradient(ellipse at 60% 40%, #7c3aed 0%, #0f0f14 60%)",
      }}
    >
      {/* Background blobs */}
      <div className="absolute h-96 w-96 rounded-full bg-violet-600/30 blur-3xl -top-20 -left-20" />
      <div className="absolute h-64 w-64 rounded-full bg-cyan-500/20 blur-2xl bottom-10 right-10" />

      {/* Glass card */}
      <div className="relative z-10 mx-4 w-full max-w-2xl rounded-2xl border border-white/20 bg-white/10 p-10 shadow-2xl backdrop-blur-xl">
        <h1 className="text-4xl font-bold text-white md:text-5xl">
          The UI layer you've
          <br /> been missing.
        </h1>
        <p className="mt-4 text-white/70">
          Components with real depth. No flat, no boring.
        </p>
        <div className="mt-8 flex gap-3">
          <a
            href="/glassmorphism"
            className="rounded-lg bg-white px-5 py-2.5 text-sm font-semibold text-black"
          >
            Explore glassmorphism
          </a>
          <a
            href="/templates"
            className="rounded-lg border border-white/20 px-5 py-2.5 text-sm text-white/80"
          >
            See templates
          </a>
        </div>
      </div>
    </section>
  );
}

Look, the background blobs with blur-3xl are doing the heavy lifting here. They create the colour pools that make the frosted glass card visible. Without those, the whole effect falls flat. Keep blob opacity in the 20-30% range — any higher and it looks like a mistake rather than a design choice.

Tailwind Responsive Patterns You Can't Skip

Every hero breaks at some breakpoint if you don't test it. The three danger zones are: 768px (iPad portrait), 375px (small phones), and anything over 1440px where text can start feeling small relative to the viewport.

For font sizes, use clamp-based scaling or at minimum provide three responsive steps. text-4xl md:text-6xl lg:text-7xl is the pattern you'll see used most. On a 1920px monitor, text-7xl is 72px — that's the right scale. On a 375px phone, text-4xl gives you 36px, which is still readable without dominating the viewport.

That said, don't forget line height on large headings. Tailwind's default leading values are designed for body text. For hero headlines, leading-tight or even leading-none usually looks better — tighter text blocks read as confident and modern while loose tracking reads as tentative. The difference between those two classes is roughly 12-16px of line height at large type sizes, which is enough to make your heading feel like two different designs.

One more thing — test with real copy, not 'Lorem ipsum'. Hero headlines almost always need line breaks managed manually (<br /> or forced word breaks) because auto-wrapping at 50% viewport width will randomly land the last word alone on a line and look terrible. You won't catch this with placeholder text.

Common Hero Section Mistakes (And Fast Fixes)

The most common one: a CTA button that's the same visual weight as everything else. Your primary CTA needs to win. That means higher contrast, more padding, and probably a heavier font weight than you'd think is necessary. If you're unsure, make it bigger. It's a button, not a footnote.

Second most common: background images without a proper overlay. Raw photos behind text fail accessibility contrast checks and just look lazy. A bg-gradient-to-b from-black/60 to-black/30 overlay on top of any image will get you to WCAG AA compliance without killing the visual. Takes 2 seconds to add.

Slow animations are a silent conversion killer. If you're adding entrance animations — fade-ins, slides — keep them under 400ms and start from small transforms (8px translate, not 40px). Anything longer than 400ms at page load makes the site feel slow even when it isn't. Check the gradient generator and other Empire UI tools for examples of snappy, non-distracting motion patterns.

Finally: don't put social proof (logos, testimonials) directly in the hero. Put it immediately below — it needs its own section to breathe. Cramming it into the hero splits visual attention at the worst possible moment.

FAQ

Read next