How to Create a Responsive Hero Section with React and Tailwind

The hero section is the first thing visitors see. Here are several high-impact hero patterns that convert.

Pattern 1: Centered Text with CTA

export function CenteredHero() {
  return (
    <section className="relative overflow-hidden bg-white dark:bg-gray-950">
      <div className="mx-auto max-w-5xl px-4 py-24 text-center sm:py-32">
        <div className="mb-4 inline-flex items-center gap-2 rounded-full border px-3 py-1 text-sm text-gray-600 dark:border-gray-700 dark:text-gray-400">
          <span className="h-1.5 w-1.5 rounded-full bg-green-500" />
          Now available in 50+ countries
        </div>

        <h1 className="mx-auto max-w-3xl text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl dark:text-white">
          Build websites that{" "}
          <span className="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
            drive results
          </span>
        </h1>

        <p className="mx-auto mt-6 max-w-xl text-lg text-gray-600 dark:text-gray-400">
          Custom web design, development, and digital solutions that help
          businesses grow online and convert more visitors into customers.
        </p>

        <div className="mt-8 flex flex-col items-center gap-3 sm:flex-row sm:justify-center">
          <a
            href="/contact"
            className="rounded-lg bg-blue-600 px-6 py-3 text-sm font-medium text-white shadow-lg shadow-blue-600/25 transition hover:bg-blue-700"
          >
            Get a Free Quote
          </a>
          <a
            href="/demos"
            className="rounded-lg border px-6 py-3 text-sm font-medium transition hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-800"
          >
            View Our Work
          </a>
        </div>

        {/* Social proof */}
        <div className="mt-12 flex items-center justify-center gap-8 opacity-60">
          <p className="text-sm text-gray-500">Trusted by 200+ businesses</p>
        </div>
      </div>
    </section>
  );
}

Pattern 2: Split Layout (Text + Image)

export function SplitHero() {
  return (
    <section className="bg-white dark:bg-gray-950">
      <div className="mx-auto grid max-w-7xl items-center gap-12 px-4 py-20 lg:grid-cols-2 lg:py-28">
        <div>
          <h1 className="text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl dark:text-white">
            Web solutions built for growth
          </h1>
          <p className="mt-4 text-lg text-gray-600 dark:text-gray-400">
            We design and build websites, web applications, and mobile apps
            that help local businesses compete and win online.
          </p>
          <div className="mt-8 flex flex-col gap-3 sm:flex-row">
            <a
              href="/contact"
              className="rounded-lg bg-blue-600 px-6 py-3 text-center text-sm font-medium text-white hover:bg-blue-700"
            >
              Start Your Project
            </a>
            <a
              href="/pricing"
              className="rounded-lg border px-6 py-3 text-center text-sm font-medium hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-800"
            >
              See Pricing
            </a>
          </div>

          {/* Stats */}
          <div className="mt-10 grid grid-cols-3 gap-8 border-t pt-8 dark:border-gray-800">
            <div>
              <p className="text-2xl font-bold text-gray-900 dark:text-white">200+</p>
              <p className="text-sm text-gray-500">Projects delivered</p>
            </div>
            <div>
              <p className="text-2xl font-bold text-gray-900 dark:text-white">98%</p>
              <p className="text-sm text-gray-500">Client satisfaction</p>
            </div>
            <div>
              <p className="text-2xl font-bold text-gray-900 dark:text-white">5 stars</p>
              <p className="text-sm text-gray-500">Average rating</p>
            </div>
          </div>
        </div>

        <div className="relative">
          <div className="aspect-[4/3] overflow-hidden rounded-2xl bg-gradient-to-br from-blue-100 to-purple-100 dark:from-blue-900/20 dark:to-purple-900/20">
            <img
              src="/images/hero-dashboard.png"
              alt="Dashboard preview"
              className="h-full w-full rounded-2xl object-cover shadow-2xl"
            />
          </div>
          {/* Floating badge */}
          <div className="absolute -bottom-4 -left-4 rounded-xl border bg-white p-3 shadow-lg dark:border-gray-700 dark:bg-gray-800">
            <p className="text-xs text-gray-500">Monthly visitors</p>
            <p className="text-lg font-bold text-green-600">+142%</p>
          </div>
        </div>
      </div>
    </section>
  );
}

Pattern 3: Full-Screen Background

export function FullScreenHero() {
  return (
    <section className="relative flex min-h-[90vh] items-center justify-center">
      {/* Background */}
      <div className="absolute inset-0">
        <img
          src="/images/hero-bg.jpg"
          alt=""
          className="h-full w-full object-cover"
        />
        <div className="absolute inset-0 bg-black/60" />
      </div>

      {/* Content */}
      <div className="relative z-10 mx-auto max-w-4xl px-4 text-center text-white">
        <h1 className="text-4xl font-bold tracking-tight sm:text-6xl">
          Your digital presence, perfected
        </h1>
        <p className="mx-auto mt-6 max-w-xl text-lg text-gray-300">
          We build websites that look stunning and perform even better.
        </p>
        <a
          href="/contact"
          className="mt-8 inline-block rounded-lg bg-white px-8 py-3 text-sm font-medium text-gray-900 transition hover:bg-gray-100"
        >
          Schedule a Call
        </a>
      </div>
    </section>
  );
}

Pattern 4: With Video Background

export function VideoHero() {
  return (
    <section className="relative flex min-h-[80vh] items-center overflow-hidden">
      <video
        autoPlay
        muted
        loop
        playsInline
        className="absolute inset-0 h-full w-full object-cover"
      >
        <source src="/videos/hero.mp4" type="video/mp4" />
      </video>
      <div className="absolute inset-0 bg-gray-900/70" />

      <div className="relative z-10 mx-auto max-w-4xl px-4 text-center text-white">
        <h1 className="text-5xl font-bold sm:text-7xl">
          We build the web
        </h1>
        <p className="mt-4 text-xl text-gray-300">
          Custom digital solutions for ambitious businesses.
        </p>
      </div>
    </section>
  );
}

Pattern 5: With Animated Grid Background

export function GridHero() {
  return (
    <section className="relative overflow-hidden bg-gray-950 py-32">
      {/* Animated grid */}
      <div
        className="absolute inset-0 opacity-20"
        style={{
          backgroundImage:
            "linear-gradient(rgba(59,130,246,0.3) 1px, transparent 1px), linear-gradient(90deg, rgba(59,130,246,0.3) 1px, transparent 1px)",
          backgroundSize: "60px 60px",
        }}
      />

      {/* Gradient orbs */}
      <div className="absolute left-1/4 top-1/4 h-96 w-96 rounded-full bg-blue-600/20 blur-3xl" />
      <div className="absolute right-1/4 bottom-1/4 h-96 w-96 rounded-full bg-purple-600/20 blur-3xl" />

      <div className="relative z-10 mx-auto max-w-4xl px-4 text-center">
        <h1 className="text-5xl font-bold tracking-tight text-white sm:text-7xl">
          Ship faster.{" "}
          <span className="bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
            Grow bigger.
          </span>
        </h1>
        <p className="mx-auto mt-6 max-w-xl text-lg text-gray-400">
          Full-stack web development and design services that
          accelerate your business growth.
        </p>
        <div className="mt-8 flex justify-center gap-4">
          <a
            href="/contact"
            className="rounded-lg bg-white px-6 py-3 text-sm font-medium text-gray-900 hover:bg-gray-100"
          >
            Get Started
          </a>
          <a
            href="/services"
            className="rounded-lg border border-gray-700 px-6 py-3 text-sm font-medium text-white hover:bg-white/10"
          >
            Learn More
          </a>
        </div>
      </div>
    </section>
  );
}

Responsive Design Tips

/* Ensure text scales properly */
.hero-heading {
  font-size: clamp(2rem, 5vw, 4rem);
}

/* Stack buttons on mobile */
@media (max-width: 640px) {
  .hero-buttons {
    flex-direction: column;
    width: 100%;
  }
}

Need a Custom Landing Page?

We design and build high-converting landing pages and hero sections. Contact us for a free consultation.