31 Tailwind CSS Hero Sections
25 / 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

Parallax Mountain Landscape Hero in Tailwind CSS

Three SVG ridgelines drift at different speeds in front of a glacier-blue sky with a low sun, drifting clouds and valley fog — the outdoor / travel-brand parallax landscape, with a lodge booking strip under the headline.

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-25 relative isolate w-full min-h-svh overflow-hidden bg-linear-to-b from-ths25-sky via-ths25-sky2 to-ths25-ridge3 font-ths25-sans text-ths25-ink" aria-label="Parallax mountain hero">
  <div aria-hidden="true" class="absolute inset-0 -z-10 bg-[radial-gradient(50%_70%_at_80%_30%,rgb(255_240_210/0.45),transparent_70%)]"></div>
  <span aria-hidden="true" class="absolute top-[18%] right-[18%] -z-10 size-20 rounded-full bg-ths25-sun shadow-[0_0_80px_rgb(249_240_214/0.8)]"></span>
  <span aria-hidden="true" class="absolute top-[8%] left-[62%] -z-10 h-6 w-40 animate-ths25-cloud rounded-full bg-white/60 blur-[2px] motion-reduce:animate-none"></span>
  <span aria-hidden="true" class="absolute top-[34%] left-[72%] -z-10 h-4 w-28 animate-ths25-cloud rounded-full bg-white/45 blur-[2px] [animation-delay:-20s] motion-reduce:animate-none"></span>
  <svg aria-hidden="true" viewBox="0 0 1200 320" preserveAspectRatio="none" class="absolute bottom-0 left-0 -z-10 h-[65%] w-[104%] animate-ths25-drift text-ths25-ridge3 [animation-delay:-4s] [animation-duration:16s] motion-reduce:animate-none"><path fill="currentColor" d="M0,320 L0,180 L120,80 L240,140 L360,60 L480,120 L600,40 L720,110 L840,70 L960,130 L1080,90 L1200,150 L1200,320 Z"/></svg>
  <div aria-hidden="true" class="absolute inset-x-0 bottom-[22%] -z-10 h-[20%] bg-linear-to-t from-white/35 to-transparent"></div>
  <svg aria-hidden="true" viewBox="0 0 1200 320" preserveAspectRatio="none" class="absolute bottom-0 left-0 -z-10 h-1/2 w-[104%] animate-ths25-drift text-ths25-ridge2 [animation-delay:-2s] [animation-duration:12s] motion-reduce:animate-none"><path fill="currentColor" d="M0,320 L0,220 L100,140 L200,200 L320,120 L440,180 L560,100 L680,170 L800,130 L920,200 L1040,150 L1200,200 L1200,320 Z"/></svg>
  <svg aria-hidden="true" viewBox="0 0 1200 320" preserveAspectRatio="none" class="absolute bottom-0 left-0 -z-10 h-[38%] w-[104%] animate-ths25-drift text-ths25-ridge1 [animation-duration:8s] motion-reduce:animate-none"><path fill="currentColor" d="M0,320 L0,260 L120,200 L240,240 L360,180 L480,220 L600,160 L720,210 L840,170 L960,230 L1080,190 L1200,240 L1200,320 Z"/></svg>
  <div class="max-w-xl px-5 pt-[clamp(48px,10vh,120px)] sm:px-14">
    <span class="font-ths25-mono text-[11px] tracking-[0.18em] text-ths25-ridge1">— EST. 1958 · LAKE COUNTRY</span>
    <h1 class="mt-4 font-ths25-serif text-[clamp(40px,6vw,68px)] leading-[1.02] font-bold tracking-[-0.02em] text-balance">Trails that <em class="text-ths25-ridge1">earn the silence.</em></h1>
    <p class="mt-5 max-w-md text-[17px] leading-relaxed text-ths25-body">Six lodges. One ridge. The mountains your grandfather wrote home about.</p>
    <div class="mt-8 flex flex-wrap items-center gap-4">
      <a href="#book" class="inline-flex min-h-12 items-center border-2 border-ths25-ridge1 bg-ths25-sun px-6 font-ths25-mono text-[13px] font-bold tracking-[0.12em] text-ths25-ridge1 transition hover:bg-ths25-ridge1 hover:text-ths25-sun focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-ths25-ridge1 motion-reduce:transition-none">Reserve a cabin →</a>
      <span class="font-ths25-mono text-xs text-ths25-ridge1">from $210 / night · 4.9 ★</span>
    </div>
  </div>
</section>
@import "tailwindcss";

@theme {
  --color-ths25-sky: #d8e8f0;
  --color-ths25-sky: oklch(0.921 0.02 229.1);
  --color-ths25-sky2: #a8c8d8;
  --color-ths25-sky2: oklch(0.814 0.041 229.5);
  --color-ths25-sun: #f9f0d6;
  --color-ths25-sun: oklch(0.955 0.035 91.1);
  --color-ths25-ink: #0d2030;
  --color-ths25-ink: oklch(0.236 0.04 246);
  --color-ths25-body: #22404f;
  --color-ths25-body: oklch(0.355 0.044 231.6);
  --color-ths25-ridge1: #1f3a4a;
  --color-ths25-ridge1: oklch(0.334 0.043 236.1);
  --color-ths25-ridge2: #3a5868;
  --color-ths25-ridge2: oklch(0.443 0.044 232.4);
  --color-ths25-ridge3: #5a7a8a;
  --color-ths25-ridge3: oklch(0.561 0.044 230.1);
  --font-ths25-serif: 'Playfair Display', Georgia, serif;
  --font-ths25-sans: 'Geist', system-ui, sans-serif;
  --font-ths25-mono: 'JetBrains Mono', ui-monospace, monospace;
  --animate-ths25-drift: ths25-drift 12s ease-in-out infinite alternate;
  --animate-ths25-cloud: ths25-cloud 60s linear infinite;

  @keyframes ths25-drift {
    to {
      transform: translateX(-2%);
    }
  }

  @keyframes ths25-cloud {
    from {
      transform: translateX(-30vw);
    }

    to {
      transform: translateX(60vw);
    }
  }
}
/* 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-25 {
  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-ths25-sky: #d8e8f0;
  --color-ths25-sky: oklch(0.921 0.02 229.1);
  --color-ths25-sky2: #a8c8d8;
  --color-ths25-sky2: oklch(0.814 0.041 229.5);
  --color-ths25-sun: #f9f0d6;
  --color-ths25-sun: oklch(0.955 0.035 91.1);
  --color-ths25-ink: #0d2030;
  --color-ths25-ink: oklch(0.236 0.04 246);
  --color-ths25-body: #22404f;
  --color-ths25-body: oklch(0.355 0.044 231.6);
  --color-ths25-ridge1: #1f3a4a;
  --color-ths25-ridge1: oklch(0.334 0.043 236.1);
  --color-ths25-ridge2: #3a5868;
  --color-ths25-ridge2: oklch(0.443 0.044 232.4);
  --color-ths25-ridge3: #5a7a8a;
  --color-ths25-ridge3: oklch(0.561 0.044 230.1);
  --font-ths25-serif: 'Playfair Display', Georgia, serif;
  --font-ths25-sans: 'Geist', system-ui, sans-serif;
  --font-ths25-mono: 'JetBrains Mono', ui-monospace, monospace;
  --animate-ths25-drift: ths25-drift 12s ease-in-out infinite alternate;
  --animate-ths25-cloud: ths25-cloud 60s linear infinite;

  @keyframes ths25-drift {
    to {
      transform: translateX(-2%);
    }
  }

  @keyframes ths25-cloud {
    from {
      transform: translateX(-30vw);
    }

    to {
      transform: translateX(60vw);
    }
  }
}
/* 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-25 {
  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=Playfair+Display:ital,wght@0,700;1,700&family=Geist:wght@400;500;600&family=JetBrains+Mono:wght@500;700&display=swap">

What changed in the port

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

  • The three .hs-25__mN rules became per-SVG duration and delay utilities on one shared animation; fills moved to currentColor + text-* tokens.
  • Bug fix from the CSS original: 100%-wide ridges translated −2% exposed the sky at the right edge; they are now 104% wide.
  • UI upgrade: drifting clouds and a valley fog band add atmosphere; a price + rating line sits beside the CTA; the sun glows warmer.
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: Parallax Mountain Landscape Hero in Tailwind CSS
Source: https://codefronts.com/layouts/tailwind-css-hero-sections/tailwind-parallax-mountain-landscape-hero/

Three SVG ridgelines drift at different speeds in front of a glacier-blue sky with a low sun, drifting clouds and valley fog — the outdoor / travel-brand parallax landscape, with a lodge booking strip under the headline.
## HTML
```html
<section class="ths-25 relative isolate w-full min-h-svh overflow-hidden bg-linear-to-b from-ths25-sky via-ths25-sky2 to-ths25-ridge3 font-ths25-sans text-ths25-ink" aria-label="Parallax mountain hero">
  <div aria-hidden="true" class="absolute inset-0 -z-10 bg-[radial-gradient(50%_70%_at_80%_30%,rgb(255_240_210/0.45),transparent_70%)]"></div>
  <span aria-hidden="true" class="absolute top-[18%] right-[18%] -z-10 size-20 rounded-full bg-ths25-sun shadow-[0_0_80px_rgb(249_240_214/0.8)]"></span>
  <span aria-hidden="true" class="absolute top-[8%] left-[62%] -z-10 h-6 w-40 animate-ths25-cloud rounded-full bg-white/60 blur-[2px] motion-reduce:animate-none"></span>
  <span aria-hidden="true" class="absolute top-[34%] left-[72%] -z-10 h-4 w-28 animate-ths25-cloud rounded-full bg-white/45 blur-[2px] [animation-delay:-20s] motion-reduce:animate-none"></span>
  <svg aria-hidden="true" viewBox="0 0 1200 320" preserveAspectRatio="none" class="absolute bottom-0 left-0 -z-10 h-[65%] w-[104%] animate-ths25-drift text-ths25-ridge3 [animation-delay:-4s] [animation-duration:16s] motion-reduce:animate-none"><path fill="currentColor" d="M0,320 L0,180 L120,80 L240,140 L360,60 L480,120 L600,40 L720,110 L840,70 L960,130 L1080,90 L1200,150 L1200,320 Z"/></svg>
  <div aria-hidden="true" class="absolute inset-x-0 bottom-[22%] -z-10 h-[20%] bg-linear-to-t from-white/35 to-transparent"></div>
  <svg aria-hidden="true" viewBox="0 0 1200 320" preserveAspectRatio="none" class="absolute bottom-0 left-0 -z-10 h-1/2 w-[104%] animate-ths25-drift text-ths25-ridge2 [animation-delay:-2s] [animation-duration:12s] motion-reduce:animate-none"><path fill="currentColor" d="M0,320 L0,220 L100,140 L200,200 L320,120 L440,180 L560,100 L680,170 L800,130 L920,200 L1040,150 L1200,200 L1200,320 Z"/></svg>
  <svg aria-hidden="true" viewBox="0 0 1200 320" preserveAspectRatio="none" class="absolute bottom-0 left-0 -z-10 h-[38%] w-[104%] animate-ths25-drift text-ths25-ridge1 [animation-duration:8s] motion-reduce:animate-none"><path fill="currentColor" d="M0,320 L0,260 L120,200 L240,240 L360,180 L480,220 L600,160 L720,210 L840,170 L960,230 L1080,190 L1200,240 L1200,320 Z"/></svg>
  <div class="max-w-xl px-5 pt-[clamp(48px,10vh,120px)] sm:px-14">
    <span class="font-ths25-mono text-[11px] tracking-[0.18em] text-ths25-ridge1">— EST. 1958 · LAKE COUNTRY</span>
    <h1 class="mt-4 font-ths25-serif text-[clamp(40px,6vw,68px)] leading-[1.02] font-bold tracking-[-0.02em] text-balance">Trails that <em class="text-ths25-ridge1">earn the silence.</em></h1>
    <p class="mt-5 max-w-md text-[17px] leading-relaxed text-ths25-body">Six lodges. One ridge. The mountains your grandfather wrote home about.</p>
    <div class="mt-8 flex flex-wrap items-center gap-4">
      <a href="#book" class="inline-flex min-h-12 items-center border-2 border-ths25-ridge1 bg-ths25-sun px-6 font-ths25-mono text-[13px] font-bold tracking-[0.12em] text-ths25-ridge1 transition hover:bg-ths25-ridge1 hover:text-ths25-sun focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-ths25-ridge1 motion-reduce:transition-none">Reserve a cabin →</a>
      <span class="font-ths25-mono text-xs text-ths25-ridge1">from $210 / night · 4.9 ★</span>
    </div>
  </div>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-ths25-sky: #d8e8f0;
  --color-ths25-sky: oklch(0.921 0.02 229.1);
  --color-ths25-sky2: #a8c8d8;
  --color-ths25-sky2: oklch(0.814 0.041 229.5);
  --color-ths25-sun: #f9f0d6;
  --color-ths25-sun: oklch(0.955 0.035 91.1);
  --color-ths25-ink: #0d2030;
  --color-ths25-ink: oklch(0.236 0.04 246);
  --color-ths25-body: #22404f;
  --color-ths25-body: oklch(0.355 0.044 231.6);
  --color-ths25-ridge1: #1f3a4a;
  --color-ths25-ridge1: oklch(0.334 0.043 236.1);
  --color-ths25-ridge2: #3a5868;
  --color-ths25-ridge2: oklch(0.443 0.044 232.4);
  --color-ths25-ridge3: #5a7a8a;
  --color-ths25-ridge3: oklch(0.561 0.044 230.1);
  --font-ths25-serif: 'Playfair Display', Georgia, serif;
  --font-ths25-sans: 'Geist', system-ui, sans-serif;
  --font-ths25-mono: 'JetBrains Mono', ui-monospace, monospace;
  --animate-ths25-drift: ths25-drift 12s ease-in-out infinite alternate;
  --animate-ths25-cloud: ths25-cloud 60s linear infinite;

  @keyframes ths25-drift {
    to {
      transform: translateX(-2%);
    }
  }

  @keyframes ths25-cloud {
    from {
      transform: translateX(-30vw);
    }

    to {
      transform: translateX(60vw);
    }
  }
}
/* 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-25 {
  width: 100%;
  min-height: 100svh;
}
```

How this works

Parallax is relative speed. All three ridges share one keyframe (translateX(-2%), alternate) but run at 8, 12 and 16 seconds — the nearest moves fastest, which the eye reads as depth.

Fixing the edge. A 100%-wide SVG translated left by 2% reveals a sliver of sky on the right; the ridges are now 104% wide so there is always mountain under the viewport edge.

Make it yours

  • Re-colour ridges through the three --color-ths25-ridge* tokens.
  • Night mode: sky gradient to #0b1a2a → #1f3a4a, sun becomes a moon (bg-white).
  • Scroll-linked parallax: replace the animation with [animation-timeline:scroll()] where supported.

Gotchas — read before shipping

  • preserveAspectRatio=none stretches ridges on ultra-wide screens — that's intentional here.
  • Copy sits over the sky, so keep ink dark; don't let a ridge rise behind the paragraph.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

SVG and keyframes are universal.

Techniques used in this demo

Utilitiesfirst-class utility or variant

linear gradienttw ↗prefers-reduced-motiontw ↗

Plain CSSno Tailwind surface

@keyframestw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →