31 Tailwind CSS Hero Sections
10 / 31

All 31 in 31 Tailwind CSS Hero Sections

  1. 01Centered Hero Section in Tailwind CSS with Serif Headline & Dual CTA
  2. 02Tailwind CSS Split Hero Section with Dashboard Mockup
  3. 03Tailwind CSS Animated Gradient Mesh Hero Section
  4. 04Glassmorphism Hero Section in Tailwind CSS with Aurora Background
  5. 05Tailwind CSS Developer Hero Section with Terminal Window
  6. 06Tailwind Hero Section with Animated Geometric Shapes Background
  7. 07Tailwind CSS Hero Section with Star Rating & Logo Cloud
  8. 08Tailwind CSS Animated Headline Hero with Staggered Word Reveal
  9. 09Before and After Image Comparison Slider Hero in Tailwind CSS
  10. 10Full-Screen Tailwind Hero with Animated Scroll Down Indicator
  11. 11Magazine Cover Hero Section in Tailwind CSS
  12. 12Asymmetric Typography Hero Section in Tailwind CSS
  13. 13Tailwind CSS Hero Section with Oversized Background Number
  14. 14Infinite Scrolling Marquee Hero Section in Tailwind CSS
  15. 15Tailwind CSS Hero Section with Image & Overlay Card
  16. 16Brutalist Hero Section in Tailwind CSS
  17. 17Vertical Text Hero Section in Tailwind CSS (Japanese Writing Mode)
  18. 18Kinetic Typography Hero in Tailwind CSS with Animated Letters
  19. 19Bento Grid Hero Section in Tailwind CSS
  20. 20Animated Gradient Text Hero Section in Tailwind CSS
  21. 21Tailwind CSS Product Hero with Floating Feature Badges
  22. 22Tailwind CSS Hero Section with Pricing Card
  23. 23Mobile App Landing Page Hero in Tailwind CSS with App Store Buttons
  24. 24Neon Glow Hero Section in Tailwind CSS (Cyberpunk)
  25. 25Parallax Mountain Landscape Hero in Tailwind CSS
  26. 26Isometric Illustration Hero Section in Tailwind CSS
  27. 273D Card Stack Hero in Tailwind CSS with Hover Fan-Out
  28. 28Animated Starfield Background Hero in Tailwind CSS
  29. 29Glitch Text Effect Hero Section in Tailwind CSS
  30. 30Animated Conic Gradient Ring Hero in Tailwind CSS
  31. 31Mouse-Tracking Liquid Glass Lens Hero in Tailwind CSS
Pure TailwindMIT licensed

Full-Screen Tailwind Hero with Animated Scroll Down Indicator

A full-screen cabin-retreat hero with an animated mouse-wheel scroll cue — forest green on birch, a soft-yellow neo-brutalist CTA and a booking detail strip. The cue is a real link to the next section, so it works for keyboards too.

Live Demo
Plain CSSTailwind v4
Try it

Complete Tailwind CSS landing page templates in HTML, React, Next.js and Vue · from $49

Cruip · Affiliate link

Browse Cruip templates

The code

<section class="ths-10 relative grid w-full min-h-svh place-items-center bg-ths10-bg bg-[radial-gradient(80%_60%_at_50%_0%,var(--color-ths10-glow),transparent_70%)] px-5 pt-16 pb-32 font-ths10-sans text-ths10-ink sm:px-14" aria-label="Full-screen hero with scroll cue">
  <div class="max-w-[46rem] text-center">
    <span class="font-ths10-serif text-lg text-ths10-sage italic">— A small place upstate</span>
    <h1 class="mt-4 font-ths10-serif text-[clamp(38px,6vw,68px)] leading-[1.02] font-semibold tracking-[-0.015em] text-balance">Slow Sundays, <em class="text-ths10-honey">warm wood,</em> not a single notification.</h1>
    <p class="mx-auto mt-5 max-w-[30rem] text-[17px] leading-relaxed text-ths10-body">Three cabins, two acres, no Wi-Fi, one shared kitchen. Book yourself a real weekend.</p>
    <a href="#book" class="mt-8 inline-flex min-h-12 items-center border-2 border-ths10-ink bg-ths10-sun px-7 text-sm font-bold tracking-[0.04em] text-ths10-ink shadow-[4px_4px_0_var(--color-ths10-ink)] transition hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-[2px_2px_0_var(--color-ths10-ink)] focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-ths10-ink motion-reduce:transition-none">Check availability</a>
    <dl class="mx-auto mt-10 flex max-w-md flex-wrap justify-center divide-x divide-ths10-ink/15 font-ths10-mono text-xs text-ths10-body">
      <div class="px-5"><dt class="sr-only">Drive</dt><dd>2h from NYC</dd></div>
      <div class="px-5"><dt class="sr-only">From</dt><dd>from $180 / night</dd></div>
      <div class="px-5"><dt class="sr-only">Capacity</dt><dd>sleeps 2–6</dd></div>
    </dl>
  </div>
  <a href="#ths10-next" aria-label="Scroll to details" class="group absolute bottom-6 left-1/2 flex min-h-11 -translate-x-1/2 flex-col items-center gap-2 rounded-lg px-3 py-1 font-ths10-mono text-[10px] tracking-[0.2em] text-ths10-sage uppercase focus-visible:outline-2 focus-visible:outline-ths10-ink">
    <span>scroll</span>
    <span class="relative h-9 w-[22px] rounded-xl border-2 border-ths10-ink transition group-hover:border-ths10-honey"><span class="absolute top-1.5 left-1/2 h-[7px] w-[3px] -translate-x-1/2 animate-ths10-wheel rounded-sm bg-ths10-ink motion-reduce:animate-none"></span></span>
  </a>
</section>
<div id="ths10-next" class="grid h-40 place-items-center bg-ths10-ink font-ths10-mono text-xs tracking-[0.2em] text-ths10-bg uppercase">Next section</div>
@import "tailwindcss";

@theme {
  --color-ths10-bg: #f3eadb;
  --color-ths10-bg: oklch(0.94 0.022 80.7);
  --color-ths10-glow: #d3dccb;
  --color-ths10-glow: oklch(0.883 0.025 129.9);
  --color-ths10-ink: #1e3a26;
  --color-ths10-ink: oklch(0.32 0.05 151.9);
  --color-ths10-body: #4a5b48;
  --color-ths10-body: oklch(0.451 0.037 142.1);
  --color-ths10-sage: #4f6d53;
  --color-ths10-sage: oklch(0.503 0.054 148.3);
  --color-ths10-honey: #9a6d22;
  --color-ths10-honey: oklch(0.568 0.105 75.8);
  --color-ths10-sun: #f4d35e;
  --color-ths10-sun: oklch(0.873 0.14 93.5);
  --font-ths10-serif: 'Cormorant Garamond', Georgia, serif;
  --font-ths10-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-ths10-mono: 'JetBrains Mono', ui-monospace, monospace;
  --animate-ths10-wheel: ths10-wheel 1.4s ease-in-out infinite;

  @keyframes ths10-wheel {
    0%,
        100% {
      translate: 0 0;
      opacity: 1;
    }

    50% {
      translate: 0 10px;
      opacity: 0.35;
    }
  }
}
/* Root rule: the full-bleed contract, stated in CSS as well as in the markup's utilities, so the
   stage is sized before the browser build compiles. */

.ths-10 {
  width: 100%;
  min-height: 100svh;
}

Setup — do this once per project

Skip this if your project already runs Tailwind v4.

1Load Tailwind
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

Compiles in the browser — perfect for a CodePen or a quick test, not for production.

2Add the stylesheetRequiredthe @theme block is what makes the custom utilities exist
@import "tailwindcss";

@theme {
  --color-ths10-bg: #f3eadb;
  --color-ths10-bg: oklch(0.94 0.022 80.7);
  --color-ths10-glow: #d3dccb;
  --color-ths10-glow: oklch(0.883 0.025 129.9);
  --color-ths10-ink: #1e3a26;
  --color-ths10-ink: oklch(0.32 0.05 151.9);
  --color-ths10-body: #4a5b48;
  --color-ths10-body: oklch(0.451 0.037 142.1);
  --color-ths10-sage: #4f6d53;
  --color-ths10-sage: oklch(0.503 0.054 148.3);
  --color-ths10-honey: #9a6d22;
  --color-ths10-honey: oklch(0.568 0.105 75.8);
  --color-ths10-sun: #f4d35e;
  --color-ths10-sun: oklch(0.873 0.14 93.5);
  --font-ths10-serif: 'Cormorant Garamond', Georgia, serif;
  --font-ths10-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-ths10-mono: 'JetBrains Mono', ui-monospace, monospace;
  --animate-ths10-wheel: ths10-wheel 1.4s ease-in-out infinite;

  @keyframes ths10-wheel {
    0%,
        100% {
      translate: 0 0;
      opacity: 1;
    }

    50% {
      translate: 0 10px;
      opacity: 0.35;
    }
  }
}
/* Root rule: the full-bleed contract, stated in CSS as well as in the markup's utilities, so the
   stage is sized before the browser build compiles. */

.ths-10 {
  width: 100%;
  min-height: 100svh;
}
3Fonts used by this demooptional — skip if you have your own type stack
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,600;1,500;1,600&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@500&display=swap">

What changed in the port

Which parts became utilities, which stayed CSS, and why.

  • The keyframe animates the standalone translate property, so it composes with the -translate-x-1/2 centring utility instead of overriding it (the CSS original had to repeat translate(-50%, …) in every frame).
  • UI upgrade from the CSS original: the decorative cue is now a labelled, focusable link to the next section with a 44px target.
  • UI upgrade: min-h-svh keeps the cue visible under mobile URL bars; a booking detail strip adds the price and distance visitors look for; honey italic deepened to 4.6:1.
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS demo from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Full-Screen Tailwind Hero with Animated Scroll Down Indicator
Source: https://codefronts.com/layouts/tailwind-css-hero-sections/tailwind-full-screen-hero-scroll-down-indicator/

A full-screen cabin-retreat hero with an animated mouse-wheel scroll cue — forest green on birch, a soft-yellow neo-brutalist CTA and a booking detail strip. The cue is a real link to the next section, so it works for keyboards too.
## HTML
```html
<section class="ths-10 relative grid w-full min-h-svh place-items-center bg-ths10-bg bg-[radial-gradient(80%_60%_at_50%_0%,var(--color-ths10-glow),transparent_70%)] px-5 pt-16 pb-32 font-ths10-sans text-ths10-ink sm:px-14" aria-label="Full-screen hero with scroll cue">
  <div class="max-w-[46rem] text-center">
    <span class="font-ths10-serif text-lg text-ths10-sage italic">— A small place upstate</span>
    <h1 class="mt-4 font-ths10-serif text-[clamp(38px,6vw,68px)] leading-[1.02] font-semibold tracking-[-0.015em] text-balance">Slow Sundays, <em class="text-ths10-honey">warm wood,</em> not a single notification.</h1>
    <p class="mx-auto mt-5 max-w-[30rem] text-[17px] leading-relaxed text-ths10-body">Three cabins, two acres, no Wi-Fi, one shared kitchen. Book yourself a real weekend.</p>
    <a href="#book" class="mt-8 inline-flex min-h-12 items-center border-2 border-ths10-ink bg-ths10-sun px-7 text-sm font-bold tracking-[0.04em] text-ths10-ink shadow-[4px_4px_0_var(--color-ths10-ink)] transition hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-[2px_2px_0_var(--color-ths10-ink)] focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-ths10-ink motion-reduce:transition-none">Check availability</a>
    <dl class="mx-auto mt-10 flex max-w-md flex-wrap justify-center divide-x divide-ths10-ink/15 font-ths10-mono text-xs text-ths10-body">
      <div class="px-5"><dt class="sr-only">Drive</dt><dd>2h from NYC</dd></div>
      <div class="px-5"><dt class="sr-only">From</dt><dd>from $180 / night</dd></div>
      <div class="px-5"><dt class="sr-only">Capacity</dt><dd>sleeps 2–6</dd></div>
    </dl>
  </div>
  <a href="#ths10-next" aria-label="Scroll to details" class="group absolute bottom-6 left-1/2 flex min-h-11 -translate-x-1/2 flex-col items-center gap-2 rounded-lg px-3 py-1 font-ths10-mono text-[10px] tracking-[0.2em] text-ths10-sage uppercase focus-visible:outline-2 focus-visible:outline-ths10-ink">
    <span>scroll</span>
    <span class="relative h-9 w-[22px] rounded-xl border-2 border-ths10-ink transition group-hover:border-ths10-honey"><span class="absolute top-1.5 left-1/2 h-[7px] w-[3px] -translate-x-1/2 animate-ths10-wheel rounded-sm bg-ths10-ink motion-reduce:animate-none"></span></span>
  </a>
</section>
<div id="ths10-next" class="grid h-40 place-items-center bg-ths10-ink font-ths10-mono text-xs tracking-[0.2em] text-ths10-bg uppercase">Next section</div>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-ths10-bg: #f3eadb;
  --color-ths10-bg: oklch(0.94 0.022 80.7);
  --color-ths10-glow: #d3dccb;
  --color-ths10-glow: oklch(0.883 0.025 129.9);
  --color-ths10-ink: #1e3a26;
  --color-ths10-ink: oklch(0.32 0.05 151.9);
  --color-ths10-body: #4a5b48;
  --color-ths10-body: oklch(0.451 0.037 142.1);
  --color-ths10-sage: #4f6d53;
  --color-ths10-sage: oklch(0.503 0.054 148.3);
  --color-ths10-honey: #9a6d22;
  --color-ths10-honey: oklch(0.568 0.105 75.8);
  --color-ths10-sun: #f4d35e;
  --color-ths10-sun: oklch(0.873 0.14 93.5);
  --font-ths10-serif: 'Cormorant Garamond', Georgia, serif;
  --font-ths10-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-ths10-mono: 'JetBrains Mono', ui-monospace, monospace;
  --animate-ths10-wheel: ths10-wheel 1.4s ease-in-out infinite;

  @keyframes ths10-wheel {
    0%,
        100% {
      translate: 0 0;
      opacity: 1;
    }

    50% {
      translate: 0 10px;
      opacity: 0.35;
    }
  }
}
/* Root rule: the full-bleed contract, stated in CSS as well as in the markup's utilities, so the
   stage is sized before the browser build compiles. */

.ths-10 {
  width: 100%;
  min-height: 100svh;
}
```

How this works

svh, not vh. On phones, 100vh includes the space under the URL bar, so a bottom-anchored cue sits off-screen. min-h-svh sizes to the smallest visible viewport, keeping the cue in view.

The cue does something. It is an anchor to the following section, labelled Scroll to details, with a focus ring and a 44px hit area — decoration that doubles as navigation.

Make it yours

  • Arrow cue: replace the mouse outline with a ↓ glyph and animate-bounce.
  • Background photo: add bg-[url(…)] bg-cover and a bg-black/40 overlay; switch ink tokens to light.
  • Change detail strip items in the <dl>.

Gotchas — read before shipping

  • Add scroll-smooth on <html> for an animated jump; respect motion-reduce:scroll-auto.
  • The target section must exist; the demo includes a stub #ths10-next.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

svh units are supported on Tailwind v4's floor.

Techniques used in this demo

Utilitiesfirst-class utility or variant

box-shadowtw ↗prefers-reduced-motiontw ↗

Plain CSSno Tailwind surface

@keyframestw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →