COMPONENTS · SECTIONS

Tailwind Hero Components & Sections

Grab attention using Tailwind hero sections. Full-width imagery, punchy copy and twin CTAs you can animate in minutes.

31 sections4 freeTailwind CSS v4HTML · React · MCP

Pick sections Tailkits UI

FREE HERO SECTIONS · COPY AND PASTE

All free sections

Hero: Minimal Gradient with CTAs

Minimal gradient with headline and two CTA buttons

Free

Full-width previewnpx shadcn@latest add https://tailkits.com/r/free-hero-2.json

View HTML code

<section class="bg-tk-surface-2 py-2">
  <div
    class="max-w-7xl mx-auto px-4 xl:px-0 flex items-center justify-between gap-x-2"
  >
    <div
      class="flex w-full grow items-center gap-x-2 justify-self-center md:justify-center"
    >
      <div
        class="items-center justify-center rounded-full text-sm font-medium whitespace-nowrap shadow-tk-md inline-flex bg-primary text-primary-foreground px-2 py-0.5"
      >
        <svg
          class="h-3 shrink-0 mr-1.5 text-tk-primary-foreground-muted"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="currentColor"
          aria-hidden="true"
          data-slot="icon"
        >
          <path
            fill-rule="evenodd"
            d="M14.615 1.595a.75.75 0 0 1 .359.852L12.982 9.75h7.268a.75.75 0 0 1 .548 1.262l-10.5 11.25a.75.75 0 0 1-1.272-.71l1.992-7.302H3.75a.75.75 0 0 1-.548-1.262l10.5-11.25a.75.75 0 0 1 .913-.143Z"
            clip-rule="evenodd"
          />
        </svg>
        PH10
      </div>
      <div class="text-sm font-medium text-card-foreground">
        Enjoy exclusive discounts
      </div>
    </div>
    <button
      data-tk-hover="press"
      class="flex h-6 w-6 cursor-pointer items-center justify-center rounded-tk-3xl bg-tk-fill p-1 transition hover:bg-tk-fill-strong"
      type="button"
      aria-label="Close bar"
    >
      <svg
        class="h-4 text-muted-foreground"
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke-width="1.5"
        stroke="currentColor"
        aria-hidden="true"
        data-slot="icon"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M6 18 18 6M6 6l12 12"
        />
      </svg>
    </button>
  </div>
</section>
<div class="relative">
  <img
    class="absolute left-0 top-0 -z-20 h-full w-full object-cover"
    src="https://tailkits.com/ui/iframe/assets/img/bg-12.png"
    alt=""
  />
  <header class="py-3">
    <div class="max-w-7xl mx-auto px-4 xl:px-0">
      <div
        class="bg-background flex items-center justify-between gap-x-4 rounded-tk-2xl py-2.5 pl-5 pr-2.5 shadow-tk-md lg:grid lg:grid-cols-[1fr_auto_1fr] lg:justify-stretch lg:gap-x-12 lg:rounded-[1.375rem]"
      >
        <div class="flex items-center gap-x-10">
          <a href="/" title="Home">
            <svg
              class="h-8"
              role="img"
              aria-label="Saaslandings"
              viewBox="0 0 32 32"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M19.9825 0C19.6374 4.78312 17.5074 9.07169 14.2553 12.203C17.9566 9.44226 22.5475 7.808 27.52 7.808C29.0547 7.808 30.553 7.96367 32 8.26007V19.8528C30.6297 19.2479 29.1141 18.912 27.52 18.912C21.3874 18.912 16.416 23.8834 16.416 30.016C16.416 30.6932 16.4766 31.3562 16.5927 32H5.39942C5.34155 31.3464 5.312 30.6846 5.312 30.016C5.312 23.6486 7.99172 17.9071 12.2849 13.8577C9.17118 16.1306 5.33424 17.472 1.184 17.472C0.786337 17.472 0.39155 17.4597 0 17.4354V7.97434C0.387831 8.02295 0.78299 8.048 1.184 8.048C5.92134 8.048 9.84226 4.5525 10.5083 0H19.9825Z"
                class="fill-tk-logo"
              />
            </svg>
          </a>
          <span class="hidden h-4 w-[1px] bg-tk-fill-strong lg:block"></span>
        </div>
        <nav
          class="hidden lg:block [--tk-underline-inset:0.75rem] [--tk-underline-offset:0.25rem]"
          data-tk-hover="links"
        >
          <ul class="flex items-center">
            <li>
              <a
                class="px-3 py-2 text-sm font-medium text-card-foreground transition hover:text-tk-text-soft"
                href="/features"
              >
                Features
              </a>
            </li>
            <li>
              <a
                class="px-3 py-2 text-sm font-medium text-card-foreground transition hover:text-tk-text-soft"
                href="/about"
              >
                About
              </a>
            </li>
            <li>
              <a
                class="flex items-center gap-x-1.5 px-3 py-2 text-sm font-medium text-card-foreground transition hover:text-tk-text-soft"
                href="/contact"
              >
                Contact
                <svg
                  class="h-4 text-muted-foreground"
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="currentColor"
                  aria-hidden="true"
                  data-slot="icon"
                >
                  <path
                    fill-rule="evenodd"
                    d="M8.25 3.75H19.5a.75.75 0 0 1 .75.75v11.25a.75.75 0 0 1-1.5 0V6.31L5.03 20.03a.75.75 0 0 1-1.06-1.06L17.69 5.25H8.25a.75.75 0 0 1 0-1.5Z"
                    clip-rule="evenodd"
                  />
                </svg>
              </a>
            </li>
            <li>
              <a
                class="px-3 py-2 text-sm font-medium text-card-foreground transition hover:text-tk-text-soft"
                href="/blog"
              >
                Blog
              </a>
            </li>
            <li>
              <a
                class="px-3 py-2 text-sm font-medium text-card-foreground transition hover:text-tk-text-soft"
                href="/services"
              >
                Services
              </a>
            </li>
            <li>
              <a
                class="px-3 py-2 text-sm font-medium text-card-foreground transition hover:text-tk-text-soft"
                href="/pricing"
              >
                Pricing
              </a>
            </li>
          </ul>
        </nav>
        <div class="flex items-center gap-x-10 justify-self-end">
          <span class="hidden h-4 w-[1px] bg-tk-fill-strong lg:block"></span>
          <div class="flex items-center gap-x-3 lg:gap-x-2">
            <a
              href="/log-in"
              title="Log in"
              class="items-center justify-center whitespace-nowrap text-sm font-medium transition focus:shadow-tk-focus shadow-tk-sm border border-tk-border-soft bg-background text-secondary-foreground hover:border-border hover:bg-accent disabled:border-foreground/5 disabled:bg-tk-surface/30 disabled:text-foreground/20 px-3 py-2 rounded-tk hidden lg:flex"
              data-tk-hover="press"
            >
              Log in
            </a>
            <a
              href="/sign-up"
              title="Try free"
              class="items-center justify-center whitespace-nowrap text-sm font-medium transition focus:shadow-tk-focus shadow-tk-sm bg-primary text-primary-foreground hover:bg-tk-primary-hover disabled:bg-primary/30 disabled:text-tk-primary-foreground-muted/70 px-3 py-2 rounded-tk flex"
              data-tk-hover="press"
            >
              Try free
              <span class="ml-1 text-tk-primary-foreground-faint">
                - 14 days</span
              >
            </a>
            <button
              type="button"
              aria-label="Open menu"
              class="lg:hidden"
              title="Open menu"
            >
              <svg
                class="h-6 text-tk-ink-muted"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="currentColor"
                aria-hidden="true"
                data-slot="icon"
              >
                <path
                  fill-rule="evenodd"
                  d="M3 9a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H3.75A.75.75 0 0 1 3 9Zm0 6.75a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H3.75a.75.75 0 0 1-.75-.75Z"
                  clip-rule="evenodd"
                />
              </svg>
            </button>
          </div>
        </div>
      </div>
    </div>
  </header>
  <section class="pt-16 lg:py-24">
    <div class="max-w-7xl mx-auto px-4 xl:px-0">
      <div
        data-tk-motion="cascade"
        class="flex flex-col items-start pb-80 sm:items-center sm:text-center md:mx-4 lg:mx-8 lg:w-5/12 lg:items-start lg:pb-0 lg:text-left xl:mx-10"
      >
        <div
          class="items-center justify-center rounded-full text-sm font-medium whitespace-nowrap shadow-tk-md inline-flex bg-background text-secondary-foreground px-2.5 py-1"
        >
          Introducing saaslandings
        </div>
        <h1
          class="bg-gradient-to-b from-tk-title-start to-tk-title-end bg-clip-text text-3xl font-semibold text-transparent lg:text-5xl mt-4 sm:mx-auto sm:w-2/3 sm:text-center md:w-1/2 lg:mx-0 lg:mt-6 lg:w-5/6 lg:text-left lg:leading-tight"
        >
          Redefining SaaS Standards
        </h1>
        <p
          class="mt-4 font-medium text-tk-ink-soft sm:mx-auto sm:w-2/3 sm:text-center md:w-1/2 lg:mx-0 lg:mt-6 lg:w-11/12 lg:text-left"
        >
          Join the league of mavericks and push the boundaries of SaaS design
          with inspiring design resources
        </p>
        <div
          class="mt-8 flex flex-wrap items-center justify-center gap-3 lg:mt-12"
        >
          <a
            href="/features"
            title="Learn more"
            class="items-center justify-center whitespace-nowrap text-sm font-medium transition focus:shadow-tk-focus shadow-tk-sm border border-tk-border-soft bg-background text-secondary-foreground hover:border-border hover:bg-accent disabled:border-foreground/5 disabled:bg-tk-surface/30 disabled:text-foreground/20 px-4 py-2.5 rounded-tk flex"
            data-tk-hover="press"
          >
            <svg
              class="shrink-0 text-muted-foreground mr-2 h-4"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="currentColor"
              aria-hidden="true"
              data-slot="icon"
            >
              <path
                fill-rule="evenodd"
                d="M14.615 1.595a.75.75 0 0 1 .359.852L12.982 9.75h7.268a.75.75 0 0 1 .548 1.262l-10.5 11.25a.75.75 0 0 1-1.272-.71l1.992-7.302H3.75a.75.75 0 0 1-.548-1.262l10.5-11.25a.75.75 0 0 1 .913-.143Z"
                clip-rule="evenodd"
              />
            </svg>
            Learn more
            <svg
              class="shrink-0 text-muted-foreground ml-2 h-4"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="currentColor"
              aria-hidden="true"
              data-slot="icon"
            >
              <path
                fill-rule="evenodd"
                d="M12.97 3.97a.75.75 0 0 1 1.06 0l7.5 7.5a.75.75 0 0 1 0 1.06l-7.5 7.5a.75.75 0 1 1-1.06-1.06l6.22-6.22H3a.75.75 0 0 1 0-1.5h16.19l-6.22-6.22a.75.75 0 0 1 0-1.06Z"
                clip-rule="evenodd"
              />
            </svg>
          </a>
          <a
            href="/sign-up"
            title="Try free"
            class="items-center justify-center whitespace-nowrap text-sm font-medium transition focus:shadow-tk-focus shadow-tk-sm bg-primary text-primary-foreground hover:bg-tk-primary-hover disabled:bg-primary/30 disabled:text-tk-primary-foreground-muted/70 px-4 py-2.5 rounded-tk flex"
            data-tk-hover="press"
          >
            Try free
            <span class="ml-1 text-tk-primary-foreground-faint">
              - 14 days</span
            >
            <svg
              class="shrink-0 ml-2 h-4"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="currentColor"
              aria-hidden="true"
              data-slot="icon"
            >
              <path
                fill-rule="evenodd"
                d="M12.97 3.97a.75.75 0 0 1 1.06 0l7.5 7.5a.75.75 0 0 1 0 1.06l-7.5 7.5a.75.75 0 1 1-1.06-1.06l6.22-6.22H3a.75.75 0 0 1 0-1.5h16.19l-6.22-6.22a.75.75 0 0 1 0-1.06Z"
                clip-rule="evenodd"
              />
            </svg>
          </a>
        </div>
      </div>
    </div>
  </section>
</div>

Hero: Gradient with Dual CTAs

Gradient hero with headline and two CTA buttons alongside nested windows

Free

Full-width previewnpx shadcn@latest add https://tailkits.com/r/free-hero-1.json

View HTML code

<section class="bg-tk-surface-2 py-2">
  <div
    class="max-w-7xl mx-auto px-4 xl:px-0 flex items-center justify-between gap-x-2"
  >
    <div
      class="flex w-full grow items-center gap-x-2 justify-self-center md:justify-center"
    >
      <div
        class="items-center justify-center rounded-full text-sm font-medium whitespace-nowrap shadow-tk-md inline-flex bg-primary text-primary-foreground px-2 py-0.5"
      >
        <svg
          class="h-3 shrink-0 mr-1.5 text-tk-primary-foreground-muted"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="currentColor"
          aria-hidden="true"
          data-slot="icon"
        >
          <path
            fill-rule="evenodd"
            d="M14.615 1.595a.75.75 0 0 1 .359.852L12.982 9.75h7.268a.75.75 0 0 1 .548 1.262l-10.5 11.25a.75.75 0 0 1-1.272-.71l1.992-7.302H3.75a.75.75 0 0 1-.548-1.262l10.5-11.25a.75.75 0 0 1 .913-.143Z"
            clip-rule="evenodd"
          />
        </svg>
        PH10
      </div>
      <div class="text-sm font-medium text-card-foreground">
        Enjoy exclusive discounts
      </div>
    </div>
    <button
      data-tk-hover="press"
      class="flex h-6 w-6 cursor-pointer items-center justify-center rounded-tk-3xl bg-tk-fill p-1 transition hover:bg-tk-fill-strong"
      type="button"
      aria-label="Close bar"
    >
      <svg
        class="h-4 text-muted-foreground"
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke-width="1.5"
        stroke="currentColor"
        aria-hidden="true"
        data-slot="icon"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M6 18 18 6M6 6l12 12"
        />
      </svg>
    </button>
  </div>
</section>
<div class="relative">
  <img
    class="absolute left-0 top-0 -z-20 h-full w-full object-cover"
    src="https://tailkits.com/ui/iframe/assets/img/bg-16.png"
    alt=""
  />
  <header class="py-3">
    <div class="max-w-7xl mx-auto px-4 xl:px-0">
      <div
        class="bg-background flex items-center justify-between gap-x-4 rounded-tk-2xl py-2.5 pl-5 pr-2.5 shadow-tk-md lg:grid lg:grid-cols-[1fr_auto_1fr] lg:justify-stretch lg:gap-x-12 lg:rounded-[1.375rem]"
      >
        <div class="flex items-center gap-x-10">
          <a href="/" title="Home">
            <svg
              class="h-8"
              role="img"
              aria-label="Saaslandings"
              viewBox="0 0 32 32"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M19.9825 0C19.6374 4.78312 17.5074 9.07169 14.2553 12.203C17.9566 9.44226 22.5475 7.808 27.52 7.808C29.0547 7.808 30.553 7.96367 32 8.26007V19.8528C30.6297 19.2479 29.1141 18.912 27.52 18.912C21.3874 18.912 16.416 23.8834 16.416 30.016C16.416 30.6932 16.4766 31.3562 16.5927 32H5.39942C5.34155 31.3464 5.312 30.6846 5.312 30.016C5.312 23.6486 7.99172 17.9071 12.2849 13.8577C9.17118 16.1306 5.33424 17.472 1.184 17.472C0.786337 17.472 0.39155 17.4597 0 17.4354V7.97434C0.387831 8.02295 0.78299 8.048 1.184 8.048C5.92134 8.048 9.84226 4.5525 10.5083 0H19.9825Z"
                class="fill-tk-logo"
              />
            </svg>
          </a>
          <span class="hidden h-4 w-[1px] bg-tk-fill-strong lg:block"></span>
        </div>
        <nav
          class="hidden lg:block [--tk-underline-inset:0.75rem] [--tk-underline-offset:0.25rem]"
          data-tk-hover="links"
        >
          <ul class="flex items-center">
            <li>
              <a
                class="px-3 py-2 text-sm font-medium text-card-foreground transition hover:text-tk-text-soft"
                href="/features"
              >
                Features
              </a>
            </li>
            <li>
              <a
                class="px-3 py-2 text-sm font-medium text-card-foreground transition hover:text-tk-text-soft"
                href="/about"
              >
                About
              </a>
            </li>
            <li>
              <a
                class="flex items-center gap-x-1.5 px-3 py-2 text-sm font-medium text-card-foreground transition hover:text-tk-text-soft"
                href="/contact"
              >
                Contact
                <svg
                  class="h-4 text-muted-foreground"
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="currentColor"
                  aria-hidden="true"
                  data-slot="icon"
                >
                  <path
                    fill-rule="evenodd"
                    d="M8.25 3.75H19.5a.75.75 0 0 1 .75.75v11.25a.75.75 0 0 1-1.5 0V6.31L5.03 20.03a.75.75 0 0 1-1.06-1.06L17.69 5.25H8.25a.75.75 0 0 1 0-1.5Z"
                    clip-rule="evenodd"
                  />
                </svg>
              </a>
            </li>
            <li>
              <a
                class="px-3 py-2 text-sm font-medium text-card-foreground transition hover:text-tk-text-soft"
                href="/blog"
              >
                Blog
              </a>
            </li>
            <li>
              <a
                class="px-3 py-2 text-sm font-medium text-card-foreground transition hover:text-tk-text-soft"
                href="/services"
              >
                Services
              </a>
            </li>
            <li>
              <a
                class="px-3 py-2 text-sm font-medium text-card-foreground transition hover:text-tk-text-soft"
                href="/pricing"
              >
                Pricing
              </a>
            </li>
          </ul>
        </nav>
        <div class="flex items-center gap-x-10 justify-self-end">
          <span class="hidden h-4 w-[1px] bg-tk-fill-strong lg:block"></span>
          <div class="flex items-center gap-x-3 lg:gap-x-2">
            <a
              href="/log-in"
              title="Log in"
              class="items-center justify-center whitespace-nowrap text-sm font-medium transition focus:shadow-tk-focus shadow-tk-sm border border-tk-border-soft bg-background text-secondary-foreground hover:border-border hover:bg-accent disabled:border-foreground/5 disabled:bg-tk-surface/30 disabled:text-foreground/20 px-3 py-2 rounded-tk hidden lg:flex"
              data-tk-hover="press"
            >
              Log in
            </a>
            <a
              href="/sign-up"
              title="Try free"
              class="items-center justify-center whitespace-nowrap text-sm font-medium transition focus:shadow-tk-focus shadow-tk-sm bg-primary text-primary-foreground hover:bg-tk-primary-hover disabled:bg-primary/30 disabled:text-tk-primary-foreground-muted/70 px-3 py-2 rounded-tk flex"
              data-tk-hover="press"
            >
              Try free
              <span class="ml-1 text-tk-primary-foreground-faint">
                - 14 days</span
              >
            </a>
            <button
              type="button"
              aria-label="Open menu"
              class="lg:hidden"
              title="Open menu"
            >
              <svg
                class="h-6 text-tk-ink-muted"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="currentColor"
                aria-hidden="true"
                data-slot="icon"
              >
                <path
                  fill-rule="evenodd"
                  d="M3 9a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H3.75A.75.75 0 0 1 3 9Zm0 6.75a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H3.75a.75.75 0 0 1-.75-.75Z"
                  clip-rule="evenodd"
                />
              </svg>
            </button>
          </div>
        </div>
      </div>
    </div>
  </header>
  <section class="relative overflow-hidden py-16 lg:py-24">
    <div class="max-w-7xl mx-auto px-4 xl:px-0">
      <div
        class="grid gap-y-8 md:px-4 lg:grid-cols-2 lg:items-center lg:gap-x-12 lg:gap-y-0 lg:px-8 xl:gap-x-16 xl:px-10"
      >
        <div
          data-tk-motion="cascade"
          class="flex flex-col items-start sm:items-center sm:text-center lg:items-start lg:text-left"
        >
          <div
            class="items-center justify-center rounded-full text-sm font-medium whitespace-nowrap shadow-tk-md inline-flex bg-background text-secondary-foreground px-2.5 py-1"
          >
            Introducing saaslandings
          </div>
          <h1
            class="bg-gradient-to-b from-tk-title-start to-tk-title-end bg-clip-text text-3xl font-semibold text-transparent lg:text-5xl mt-4 sm:mx-auto sm:w-2/3 sm:text-center md:w-1/2 lg:mx-0 lg:mt-6 lg:w-5/6 lg:text-left lg:leading-tight"
          >
            Transforming SaaS Experiences
          </h1>
          <p
            class="mt-4 font-medium text-tk-ink-soft sm:mx-auto sm:w-2/3 sm:text-center md:w-1/2 lg:mx-0 lg:mt-6 lg:w-11/12 lg:text-left"
          >
            Unlock the power of design to transmute your SaaS projects into
            extraordinary solutions that inspire, engage, and amaze
          </p>
          <div
            class="mt-8 flex flex-wrap items-center justify-center gap-3 lg:mt-12"
          >
            <a
              href="/features"
              title="Learn more"
              class="items-center justify-center whitespace-nowrap text-sm font-medium transition focus:shadow-tk-focus shadow-tk-sm border border-tk-border-soft bg-background text-secondary-foreground hover:border-border hover:bg-accent disabled:border-foreground/5 disabled:bg-tk-surface/30 disabled:text-foreground/20 px-4 py-2.5 rounded-tk flex"
              data-tk-hover="press"
            >
              <svg
                class="shrink-0 text-muted-foreground mr-2 h-4"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="currentColor"
                aria-hidden="true"
                data-slot="icon"
              >
                <path
                  fill-rule="evenodd"
                  d="M14.615 1.595a.75.75 0 0 1 .359.852L12.982 9.75h7.268a.75.75 0 0 1 .548 1.262l-10.5 11.25a.75.75 0 0 1-1.272-.71l1.992-7.302H3.75a.75.75 0 0 1-.548-1.262l10.5-11.25a.75.75 0 0 1 .913-.143Z"
                  clip-rule="evenodd"
                />
              </svg>
              Learn more
              <svg
                class="shrink-0 text-muted-foreground ml-2 h-4"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="currentColor"
                aria-hidden="true"
                data-slot="icon"
              >
                <path
                  fill-rule="evenodd"
                  d="M12.97 3.97a.75.75 0 0 1 1.06 0l7.5 7.5a.75.75 0 0 1 0 1.06l-7.5 7.5a.75.75 0 1 1-1.06-1.06l6.22-6.22H3a.75.75 0 0 1 0-1.5h16.19l-6.22-6.22a.75.75 0 0 1 0-1.06Z"
                  clip-rule="evenodd"
                />
              </svg>
            </a>
            <a
              href="/sign-up"
              title="Try free"
              class="items-center justify-center whitespace-nowrap text-sm font-medium transition focus:shadow-tk-focus shadow-tk-sm bg-primary text-primary-foreground hover:bg-tk-primary-hover disabled:bg-primary/30 disabled:text-tk-primary-foreground-muted/70 px-4 py-2.5 rounded-tk flex"
              data-tk-hover="press"
            >
              Try free
              <span class="ml-1 text-tk-primary-foreground-faint">
                - 14 days</span
              >
              <svg
                class="shrink-0 ml-2 h-4"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="currentColor"
                aria-hidden="true"
                data-slot="icon"
              >
                <path
                  fill-rule="evenodd"
                  d="M12.97 3.97a.75.75 0 0 1 1.06 0l7.5 7.5a.75.75 0 0 1 0 1.06l-7.5 7.5a.75.75 0 1 1-1.06-1.06l6.22-6.22H3a.75.75 0 0 1 0-1.5h16.19l-6.22-6.22a.75.75 0 0 1 0-1.06Z"
                  clip-rule="evenodd"
                />
              </svg>
            </a>
          </div>
        </div>
        <figure
          class="relative h-52 w-full overflow-hidden rounded-tk-3xl bg-tk-surface/50 before:left-0 before:top-0 before:-z-10 before:h-full before:w-full before:blur-[2px] lg:h-full"
        >
          <img
            class="absolute left-6 top-6 h-96 rounded-tk-2xl border-4 border-foreground/5 object-cover object-left-top shadow-tk-md sm:left-1/2 sm:-translate-x-1/2 sm:object-contain lg:left-12 lg:top-12 lg:h-[30rem] lg:translate-x-0 lg:object-cover xl:h-[35rem]"
            src="https://tailkits.com/ui/iframe/assets/img/browser-mock-up-2.png"
            alt="Browser mockup"
          />
        </figure>
      </div>
    </div>
  </section>
</div>

Hero: Blue Gradient with CTAs

Blue gradient hero with headline and dual CTA buttons

Free

Full-width previewnpx shadcn@latest add https://tailkits.com/r/free-hero-3.json

View HTML code

<section class="bg-tk-surface-2 py-2">
  <div
    class="max-w-7xl mx-auto px-4 xl:px-0 flex items-center justify-between gap-x-2"
  >
    <div
      class="flex w-full grow items-center gap-x-2 justify-self-center md:justify-center"
    >
      <div
        class="items-center justify-center rounded-full text-sm font-medium whitespace-nowrap shadow-tk-md inline-flex bg-primary text-primary-foreground px-2 py-0.5"
      >
        <svg
          class="h-3 shrink-0 mr-1.5 text-tk-primary-foreground-muted"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="currentColor"
          aria-hidden="true"
          data-slot="icon"
        >
          <path
            fill-rule="evenodd"
            d="M14.615 1.595a.75.75 0 0 1 .359.852L12.982 9.75h7.268a.75.75 0 0 1 .548 1.262l-10.5 11.25a.75.75 0 0 1-1.272-.71l1.992-7.302H3.75a.75.75 0 0 1-.548-1.262l10.5-11.25a.75.75 0 0 1 .913-.143Z"
            clip-rule="evenodd"
          />
        </svg>
        PH10
      </div>
      <div class="text-sm font-medium text-card-foreground">
        Enjoy exclusive discounts
      </div>
    </div>
    <button
      data-tk-hover="press"
      class="flex h-6 w-6 cursor-pointer items-center justify-center rounded-tk-3xl bg-tk-fill p-1 transition hover:bg-tk-fill-strong"
      type="button"
      aria-label="Close bar"
    >
      <svg
        class="h-4 text-muted-foreground"
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke-width="1.5"
        stroke="currentColor"
        aria-hidden="true"
        data-slot="icon"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M6 18 18 6M6 6l12 12"
        />
      </svg>
    </button>
  </div>
</section>
<div class="relative">
  <img
    class="absolute left-0 top-0 -z-20 h-full w-full object-cover"
    src="https://tailkits.com/ui/iframe/assets/img/bg-5.png"
    alt=""
  />
  <header class="py-4">
    <div
      class="max-w-7xl mx-auto px-4 xl:px-0 flex items-center justify-between gap-x-4 lg:grid lg:grid-cols-[1fr_auto_1fr] lg:justify-stretch lg:gap-x-12"
    >
      <a href="/" title="Home">
        <svg
          class="h-8"
          role="img"
          aria-label="Saaslandings"
          viewBox="0 0 32 32"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M19.9825 0C19.6374 4.78312 17.5074 9.07169 14.2553 12.203C17.9566 9.44226 22.5475 7.808 27.52 7.808C29.0547 7.808 30.553 7.96367 32 8.26007V19.8528C30.6297 19.2479 29.1141 18.912 27.52 18.912C21.3874 18.912 16.416 23.8834 16.416 30.016C16.416 30.6932 16.4766 31.3562 16.5927 32H5.39942C5.34155 31.3464 5.312 30.6846 5.312 30.016C5.312 23.6486 7.99172 17.9071 12.2849 13.8577C9.17118 16.1306 5.33424 17.472 1.184 17.472C0.786337 17.472 0.39155 17.4597 0 17.4354V7.97434C0.387831 8.02295 0.78299 8.048 1.184 8.048C5.92134 8.048 9.84226 4.5525 10.5083 0H19.9825Z"
            class="fill-tk-logo"
          />
        </svg>
      </a>
      <nav
        class="hidden lg:block [--tk-underline-inset:0.75rem] [--tk-underline-offset:0.25rem]"
        data-tk-hover="links"
      >
        <ul class="flex items-center">
          <li>
            <a
              class="px-3 py-2 text-sm font-medium text-card-foreground transition hover:text-tk-text-soft"
              href="/features"
            >
              Features
            </a>
          </li>
          <li>
            <a
              class="px-3 py-2 text-sm font-medium text-card-foreground transition hover:text-tk-text-soft"
              href="/about"
            >
              About
            </a>
          </li>
          <li>
            <a
              class="flex items-center gap-x-1.5 px-3 py-2 text-sm font-medium text-card-foreground transition hover:text-tk-text-soft"
              href="/contact"
            >
              Contact
              <svg
                class="h-4 text-muted-foreground"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="currentColor"
                aria-hidden="true"
                data-slot="icon"
              >
                <path
                  fill-rule="evenodd"
                  d="M8.25 3.75H19.5a.75.75 0 0 1 .75.75v11.25a.75.75 0 0 1-1.5 0V6.31L5.03 20.03a.75.75 0 0 1-1.06-1.06L17.69 5.25H8.25a.75.75 0 0 1 0-1.5Z"
                  clip-rule="evenodd"
                />
              </svg>
            </a>
          </li>
          <li>
            <a
              class="px-3 py-2 text-sm font-medium text-card-foreground transition hover:text-tk-text-soft"
              href="/blog"
            >
              Blog
            </a>
          </li>
          <li>
            <a
              class="px-3 py-2 text-sm font-medium text-card-foreground transition hover:text-tk-text-soft"
              href="/services"
            >
              Services
            </a>
          </li>
          <li>
            <a
              class="px-3 py-2 text-sm font-medium text-card-foreground transition hover:text-tk-text-soft"
              href="/pricing"
            >
              Pricing
            </a>
          </li>
        </ul>
      </nav>
      <div
        class="flex flex-wrap items-center justify-center gap-3 justify-self-end lg:flex-nowrap lg:gap-x-2"
      >
        <a
          href="/log-in"
          title="Log in"
          class="items-center justify-center whitespace-nowrap text-sm font-medium transition focus:shadow-tk-focus shadow-tk-sm border border-tk-border-soft bg-background text-secondary-foreground hover:border-border hover:bg-accent disabled:border-foreground/5 disabled:bg-tk-surface/30 disabled:text-foreground/20 px-3 py-2 rounded-tk hidden lg:flex"
          data-tk-hover="press"
        >
          Log in
        </a>
        <a
          href="/sign-up"
          title="Try free"
          class="items-center justify-center whitespace-nowrap text-sm font-medium transition focus:shadow-tk-focus shadow-tk-sm bg-primary text-primary-foreground hover:bg-tk-primary-hover disabled:bg-primary/30 disabled:text-tk-primary-foreground-muted/70 px-3 py-2 rounded-tk flex"
          data-tk-hover="press"
        >
          Try free
        </a>
        <button
          type="button"
          aria-label="Open menu"
          class="lg:hidden"
          title="Open menu"
        >
          <svg
            class="h-6 text-tk-ink-muted"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="currentColor"
            aria-hidden="true"
            data-slot="icon"
          >
            <path
              fill-rule="evenodd"
              d="M3 9a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H3.75A.75.75 0 0 1 3 9Zm0 6.75a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H3.75a.75.75 0 0 1-.75-.75Z"
              clip-rule="evenodd"
            />
          </svg>
        </button>
      </div>
    </div>
  </header>
  <section class="py-16 lg:py-24">
    <div
      class="max-w-7xl mx-auto px-4 xl:px-0 flex flex-col items-center text-center"
      data-tk-motion="cascade"
    >
      <div
        class="items-center justify-center rounded-full text-sm font-medium whitespace-nowrap shadow-tk-md inline-flex bg-background text-secondary-foreground px-2.5 py-1"
      >
        Introducing saaslandings
      </div>
      <h1
        class="bg-gradient-to-b from-tk-title-start to-tk-title-end bg-clip-text text-3xl font-semibold text-transparent lg:text-5xl mt-4 sm:mx-auto sm:w-2/3 lg:mt-6 lg:leading-tight xl:w-3/5"
      >
        Design Empowerment: Unleashing the Potential Within
      </h1>
      <p
        class="mt-4 font-medium text-tk-ink-soft sm:mx-auto sm:w-2/3 md:w-1/2 lg:mx-0 lg:mt-6 lg:w-1/2"
      >
        Empower your SaaS ventures with exceptional design resources and harness
        the full potential of your projects
      </p>
      <div
        class="mt-8 flex flex-wrap items-center justify-center gap-3 md:mt-10 xl:mt-12"
      >
        <a
          href="/features"
          title="Learn more"
          class="items-center justify-center whitespace-nowrap text-sm font-medium transition focus:shadow-tk-focus shadow-tk-sm border border-tk-border-soft bg-background text-secondary-foreground hover:border-border hover:bg-accent disabled:border-foreground/5 disabled:bg-tk-surface/30 disabled:text-foreground/20 px-4 py-2.5 rounded-tk flex"
          data-tk-hover="press"
        >
          <svg
            class="shrink-0 text-muted-foreground mr-2 h-4"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="currentColor"
            aria-hidden="true"
            data-slot="icon"
          >
            <path
              fill-rule="evenodd"
              d="M14.615 1.595a.75.75 0 0 1 .359.852L12.982 9.75h7.268a.75.75 0 0 1 .548 1.262l-10.5 11.25a.75.75 0 0 1-1.272-.71l1.992-7.302H3.75a.75.75 0 0 1-.548-1.262l10.5-11.25a.75.75 0 0 1 .913-.143Z"
              clip-rule="evenodd"
            />
          </svg>
          Learn more
        </a>
        <a
          href="/sign-up"
          title="Try free"
          class="items-center justify-center whitespace-nowrap text-sm font-medium transition focus:shadow-tk-focus shadow-tk-sm bg-primary text-primary-foreground hover:bg-tk-primary-hover disabled:bg-primary/30 disabled:text-tk-primary-foreground-muted/70 px-4 py-2.5 rounded-tk flex"
          data-tk-hover="press"
        >
          Try free
          <span class="ml-1 text-tk-primary-foreground-faint"> - 14 days</span>
          <svg
            class="shrink-0 ml-2 h-4"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="currentColor"
            aria-hidden="true"
            data-slot="icon"
          >
            <path
              fill-rule="evenodd"
              d="M12.97 3.97a.75.75 0 0 1 1.06 0l7.5 7.5a.75.75 0 0 1 0 1.06l-7.5 7.5a.75.75 0 1 1-1.06-1.06l6.22-6.22H3a.75.75 0 0 1 0-1.5h16.19l-6.22-6.22a.75.75 0 0 1 0-1.06Z"
              clip-rule="evenodd"
            />
          </svg>
        </a>
      </div>
    </div>
  </section>
</div>

Hero: Grid Background Layout

Grid background hero with headline and simple subtext

Free

Full-width previewnpx shadcn@latest add https://tailkits.com/r/free-hero-4.json

View HTML code

<section class="bg-tk-surface-2 py-2">
  <div
    class="max-w-7xl mx-auto px-4 xl:px-0 flex items-center justify-between gap-x-2"
  >
    <div
      class="flex w-full grow items-center gap-x-2 justify-self-center md:justify-center"
    >
      <div
        class="items-center justify-center rounded-full text-sm font-medium whitespace-nowrap shadow-tk-md inline-flex bg-primary text-primary-foreground px-2 py-0.5"
      >
        <svg
          class="h-3 shrink-0 mr-1.5 text-tk-primary-foreground-muted"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="currentColor"
          aria-hidden="true"
          data-slot="icon"
        >
          <path
            fill-rule="evenodd"
            d="M14.615 1.595a.75.75 0 0 1 .359.852L12.982 9.75h7.268a.75.75 0 0 1 .548 1.262l-10.5 11.25a.75.75 0 0 1-1.272-.71l1.992-7.302H3.75a.75.75 0 0 1-.548-1.262l10.5-11.25a.75.75 0 0 1 .913-.143Z"
            clip-rule="evenodd"
          />
        </svg>
        PH10
      </div>
      <div class="text-sm font-medium text-card-foreground">
        Enjoy exclusive discounts
      </div>
    </div>
    <button
      data-tk-hover="press"
      class="flex h-6 w-6 cursor-pointer items-center justify-center rounded-tk-3xl bg-tk-fill p-1 transition hover:bg-tk-fill-strong"
      type="button"
      aria-label="Close bar"
    >
      <svg
        class="h-4 text-muted-foreground"
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke-width="1.5"
        stroke="currentColor"
        aria-hidden="true"
        data-slot="icon"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M6 18 18 6M6 6l12 12"
        />
      </svg>
    </button>
  </div>
</section>
<div class="relative">
  <img
    class="absolute left-0 top-0 -z-20 h-full w-full object-cover"
    src="https://tailkits.com/ui/iframe/assets/img/bg-lines-9.png"
    alt=""
  />
  <header
    class="relative bg-tk-surface/20 before:absolute before:left-0 before:top-0 before:-z-10 before:h-full before:w-full before:blur-[2px] py-4"
  >
    <div
      class="max-w-7xl mx-auto px-4 xl:px-0 flex items-center justify-between gap-x-4 lg:grid lg:grid-cols-[1fr_auto_1fr] lg:justify-stretch lg:gap-x-12"
    >
      <a href="/" title="Home">
        <svg
          class="h-8"
          role="img"
          aria-label="Saaslandings"
          viewBox="0 0 32 32"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M19.9825 0C19.6374 4.78312 17.5074 9.07169 14.2553 12.203C17.9566 9.44226 22.5475 7.808 27.52 7.808C29.0547 7.808 30.553 7.96367 32 8.26007V19.8528C30.6297 19.2479 29.1141 18.912 27.52 18.912C21.3874 18.912 16.416 23.8834 16.416 30.016C16.416 30.6932 16.4766 31.3562 16.5927 32H5.39942C5.34155 31.3464 5.312 30.6846 5.312 30.016C5.312 23.6486 7.99172 17.9071 12.2849 13.8577C9.17118 16.1306 5.33424 17.472 1.184 17.472C0.786337 17.472 0.39155 17.4597 0 17.4354V7.97434C0.387831 8.02295 0.78299 8.048 1.184 8.048C5.92134 8.048 9.84226 4.5525 10.5083 0H19.9825Z"
            class="fill-tk-logo"
          />
        </svg>
      </a>
      <nav
        class="hidden lg:block [--tk-underline-inset:0.75rem] [--tk-underline-offset:0.25rem]"
        data-tk-hover="links"
      >
        <ul class="flex items-center">
          <li>
            <a
              class="px-3 py-2 text-sm font-medium text-card-foreground transition hover:text-tk-text-soft"
              href="/features"
            >
              Features
            </a>
          </li>
          <li>
            <a
              class="px-3 py-2 text-sm font-medium text-card-foreground transition hover:text-tk-text-soft"
              href="/about"
            >
              About
            </a>
          </li>
          <li>
            <a
              class="flex items-center gap-x-1.5 px-3 py-2 text-sm font-medium text-card-foreground transition hover:text-tk-text-soft"
              href="/contact"
            >
              Contact
              <svg
                class="h-4 text-muted-foreground"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="currentColor"
                aria-hidden="true"
                data-slot="icon"
              >
                <path
                  fill-rule="evenodd"
                  d="M8.25 3.75H19.5a.75.75 0 0 1 .75.75v11.25a.75.75 0 0 1-1.5 0V6.31L5.03 20.03a.75.75 0 0 1-1.06-1.06L17.69 5.25H8.25a.75.75 0 0 1 0-1.5Z"
                  clip-rule="evenodd"
                />
              </svg>
            </a>
          </li>
          <li>
            <a
              class="px-3 py-2 text-sm font-medium text-card-foreground transition hover:text-tk-text-soft"
              href="/blog"
            >
              Blog
            </a>
          </li>
          <li>
            <a
              class="px-3 py-2 text-sm font-medium text-card-foreground transition hover:text-tk-text-soft"
              href="/services"
            >
              Services
            </a>
          </li>
          <li>
            <a
              class="px-3 py-2 text-sm font-medium text-card-foreground transition hover:text-tk-text-soft"
              href="/pricing"
            >
              Pricing
            </a>
          </li>
        </ul>
      </nav>
      <div
        class="flex flex-wrap items-center justify-center gap-3 justify-self-end lg:flex-nowrap lg:gap-x-2"
      >
        <a
          href="/log-in"
          title="Log in"
          class="items-center justify-center whitespace-nowrap text-sm font-medium transition focus:shadow-tk-focus shadow-tk-sm border border-tk-border-soft bg-background text-secondary-foreground hover:border-border hover:bg-accent disabled:border-foreground/5 disabled:bg-tk-surface/30 disabled:text-foreground/20 px-3 py-2 rounded-tk hidden lg:flex"
          data-tk-hover="press"
        >
          Log in
        </a>
        <a
          href="/sign-up"
          title="Get started"
          class="items-center justify-center whitespace-nowrap text-sm font-medium transition focus:shadow-tk-focus shadow-tk-sm bg-primary text-primary-foreground hover:bg-tk-primary-hover disabled:bg-primary/30 disabled:text-tk-primary-foreground-muted/70 px-3 py-2 rounded-tk flex"
          data-tk-hover="press"
        >
          Get started
        </a>
        <button
          type="button"
          aria-label="Open menu"
          class="lg:hidden"
          title="Open menu"
        >
          <svg
            class="h-6 text-tk-ink-muted"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="currentColor"
            aria-hidden="true"
            data-slot="icon"
          >
            <path
              fill-rule="evenodd"
              d="M3 9a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H3.75A.75.75 0 0 1 3 9Zm0 6.75a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H3.75a.75.75 0 0 1-.75-.75Z"
              clip-rule="evenodd"
            />
          </svg>
        </button>
      </div>
    </div>
  </header>
  <section class="py-16 lg:pb-24">
    <div
      class="max-w-7xl mx-auto px-4 xl:px-0 flex flex-col items-center text-center"
      data-tk-motion="cascade"
    >
      <figure
        class="relative h-52 w-full overflow-hidden after:absolute after:bottom-0 after:left-0 after:h-px after:w-full after:bg-background sm:h-80 md:after:left-4 md:after:right-4 lg:h-96 lg:after:left-8 lg:after:right-8 xl:after:left-10 xl:after:right-10"
      >
        <img
          class="absolute -bottom-6 left-1/2 h-60 w-11/12 -translate-x-1/2 rounded-md border-4 border-foreground/5 object-cover object-left-top shadow-tk-md sm:h-80 sm:w-5/6 lg:h-96 lg:w-2/3 lg:rounded-tk-2xl"
          src="https://tailkits.com/ui/iframe/assets/img/browser-mock-up-1.png"
          alt="Browser mockup"
        />
      </figure>
      <div
        class="items-center justify-center rounded-full text-sm font-medium whitespace-nowrap shadow-tk-md inline-flex bg-primary text-primary-foreground px-2.5 py-1 mt-8 md:mt-12 xl:mt-16"
      >
        Introducing saaslandings
      </div>
      <h1
        class="bg-gradient-to-b from-tk-title-start to-tk-title-end bg-clip-text text-3xl font-semibold text-transparent lg:text-5xl mt-4 sm:mx-auto sm:w-2/3 lg:mt-6 lg:leading-tight"
      >
        SaaS Design Renaissance: Where Creativity Meets Impact
      </h1>
      <p
        class="mt-4 font-medium text-tk-ink-soft sm:mx-auto sm:w-2/3 md:w-1/2 lg:mx-0 lg:mt-6 lg:w-2/5"
      >
        Rediscover the renaissance of SaaS design and craft exquisite solutions
        that make a lasting impact
      </p>
    </div>
  </section>
</div>

27 MORE HERO SECTIONS IN TAILKITS UI

See plans

Hero 1

Gradient hero with navbar, headline, subtext, email form and CTA

Unlock with Tailkits UI Preview

Hero 3

Gradient hero with navbar, headline and tagline

Unlock with Tailkits UI Preview

Hero 4

Purple‑green gradient with tagline, social proof avatars and sign‑up form

Unlock with Tailkits UI Preview

Hero 5

Gradient hero with phone mockup, headline, tagline, CTAs and avatars

Unlock with Tailkits UI Preview

Hero 6

Soft gradient hero with phone mockup, headline, tagline and avatars

Unlock with Tailkits UI Preview

Hero 7

Blue gradient card with headline and email sign‑up

Unlock with Tailkits UI Preview

Hero 9

Purple‑blue gradient, headline with email field, CTA and avatars

Unlock with Tailkits UI Preview

Hero 10

Soft green gradient with headline dual CTAs and avatars

Unlock with Tailkits UI Preview

Hero 11

Split layout with browser mockup and headline plus email field

Unlock with Tailkits UI Preview

Hero 12

Hero with nested frames, headline, tagline and two CTA buttons

Unlock with Tailkits UI Preview

Hero 13

Minimal hero with large browser mockup, headline and tagline

Unlock with Tailkits UI Preview

Hero 14

Panel hero with screenshot overlay, headline, email signup and avatars

Unlock with Tailkits UI Preview

Hero 15

Gradient hero with vertical phone, headline, tagline, CTAs and avatars

Unlock with Tailkits UI Preview

Hero 16

Grid-pattern hero with phone mockup, headline, tagline and avatars

Unlock with Tailkits UI Preview

Hero 17

Centered gradient hero with headline and email sign‑up

Unlock with Tailkits UI Preview

Hero 19

Green gradient hero with headline, tagline, email input and CTA

Unlock with Tailkits UI Preview

Hero 20

Purple‑blue gradient with headline and CTAs plus avatars

Unlock with Tailkits UI Preview

Hero 21

Gradient green hero with screenshot, headline and email sign‑up

Unlock with Tailkits UI Preview

Hero 22

Vibrant yellow/orange gradient hero with large screenshot and headline with CTAs

Unlock with Tailkits UI Preview

Hero 24

Patterned hero featuring screenshot, headline, email form and avatars

Unlock with Tailkits UI Preview

Hero 25

Slanted panel hero with screenshot, headline, tagline, CTAs and avatars

Unlock with Tailkits UI Preview

Hero 26

Diagonal card with screenshot, headline and avatars

Unlock with Tailkits UI Preview

Hero 27

Neutral diagonal layout with headline, subtext and email sign‑up

Unlock with Tailkits UI Preview

Hero 28

Wave‑shaped hero with headline, subtext, CTAs and screenshot

Unlock with Tailkits UI Preview

Hero 29

Muted gradient hero with headline, email entry, CTA and screenshot

Unlock with Tailkits UI Preview

Hero 30

Circular‑pattern hero with headline, dual CTAs and avatars

Unlock with Tailkits UI Preview

Hero 31

Honeycomb‑pattern hero with headline, subtext and avatars

Unlock with Tailkits UI Preview

HERO SECTIONS FROM OTHER LIBRARIES

All component libraries

Third-party libraries in the Tailkits directory that include hero sections. Reviewed by the editors; sponsored listings are marked.

HyperUI

Free

226 Free & Open Source Tailwind CSS Components

Preline UI

Free

Preline: 740+ Tailwind pages & components

Htmlwind

Paid

225+ responsive Tailwind CSS components

Flowrift

Free

80+ ready-made Tailwind CSS components

coss ui

Free

Free Base UI and Tailwind 4 components for React, now with Chat UI

Efferd

Free

Beautiful Shadcn blocks - ready-to-use & built for speed

Prime UI

Paid

AI site builder, Next.js, Tailwind, no code

Skiper UI

Paid

70+ animated shadcn/ui components for Next.js

GOOD TO KNOW

Frequently asked questions

Answers to common questions about Tailwind hero components.

Are these Tailwind hero sections free?

4 of the 31 hero sections on this page are free (Minimal Gradient with CTAs, Gradient with Dual CTAs, Blue Gradient with CTAs, Grid Background Layout): copy the HTML above, no account needed. The other 27 are part of Tailkits UI, the paid library; each shows a preview here and unlocks its code with a Tailkits UI plan.

Which Tailwind CSS version do the hero components use?

Tailwind CSS v4. The code is plain HTML with utility classes; colours, radii and shadows read CSS variables named like shadcn/ui's (bg-primary, text-muted-foreground), so a shadcn theme or a DESIGN.md export reskins every section. Add tailkits-theme.css next to the code for the default look.

Can I use these hero sections in React or Next.js?

Yes. Every section is also a React component in the @tailkits shadcn registry. Free sections install without an account, for example: npx shadcn@latest add https://tailkits.com/r/free-<name>.json. Paid sections install with the token from your Tailkits UI account.

Can an AI coding assistant add a hero section for me?

Yes. The Tailkits MCP at tailkits.com/mcp is free and open, with no account: Claude Code, Cursor and other MCP clients can search the hero sections and insert the code into your project. A Tailkits UI token unlocks the Pro section code.

Which other libraries have Tailwind hero components?

The directory lists 14 third-party libraries with hero sections, including , , . They are shown below our own sections, with their pricing and stack.

Tailwind Hero Components & Sections

FREE HERO SECTIONS · COPY AND PASTE

Redefining SaaS Standards

Transforming SaaS Experiences

Design Empowerment: Unleashing the Potential Within

SaaS Design Renaissance: Where Creativity Meets Impact

27 MORE HERO SECTIONS IN TAILKITS UI

Hero 1

Hero 3

Hero 4

Hero 5

Hero 6

Hero 7

Hero 9

Hero 10

Hero 11

Hero 12

Hero 13

Hero 14

Hero 15

Hero 16

Hero 17

Hero 19

Hero 20

Hero 21

Hero 22

Hero 24

Hero 25

Hero 26

Hero 27

Hero 28

Hero 29

Hero 30

Hero 31

HERO SECTIONS FROM OTHER LIBRARIES

MORE TAILWIND SECTIONS

Frequently asked questions

Are these Tailwind hero sections free?

Which Tailwind CSS version do the hero components use?

Can I use these hero sections in React or Next.js?

Can an AI coding assistant add a hero section for me?

Which other libraries have Tailwind hero components?