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

Tailwind Hero Section with Animated Geometric Shapes Background

A Memphis-modern alternative to a video background — circle, triangle, pill and square float in a loop behind cobalt-on-bone copy with a lemon neo-brutalist CTA. No video file, no licensing, no layout shift.

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-06 relative isolate grid w-full min-h-svh place-items-center overflow-hidden bg-ths06-bg px-5 py-16 font-ths06-sans text-ths06-ink sm:px-14 has-[#ths06-pause:checked]:[&_[data-shape]]:[animation-play-state:paused]" aria-label="Hero with animated geometric shapes">
  <div aria-hidden="true" class="pointer-events-none absolute inset-0 -z-10">
    <span data-shape class="absolute top-[8%] left-[6%] size-[clamp(64px,10vw,110px)] animate-ths06-float rounded-full bg-ths06-ink motion-reduce:animate-none"></span>
    <span data-shape class="absolute top-[12%] right-[10%] h-[clamp(70px,11vw,120px)] w-[clamp(80px,13vw,140px)] animate-ths06-float bg-ths06-lemon [animation-delay:-3s] [animation-direction:alternate-reverse] [clip-path:polygon(50%_0,100%_100%,0_100%)] motion-reduce:animate-none"></span>
    <span data-shape class="absolute bottom-[10%] left-[12%] h-[clamp(34px,5vw,50px)] w-[clamp(96px,14vw,140px)] rotate-[-12deg] animate-ths06-float rounded-full bg-ths06-coral [animation-delay:-5s] motion-reduce:animate-none"></span>
    <span data-shape class="absolute right-[8%] bottom-[8%] size-[clamp(56px,9vw,90px)] rotate-[15deg] animate-ths06-float rounded-xl border-[3px] border-ths06-ink bg-ths06-sky [animation-delay:-7s] motion-reduce:animate-none"></span>
    <span data-shape class="absolute top-[46%] left-[3%] size-6 animate-ths06-float rounded-full border-[3px] border-ths06-coral [animation-delay:-2s] motion-reduce:animate-none"></span>
  </div>
  <div class="max-w-[40rem] text-center">
    <span class="inline-flex items-center gap-2 bg-ths06-ink px-3 py-1 font-ths06-mono text-[11px] font-bold tracking-[0.18em] text-ths06-lemon">▸ NOW PLAYING</span>
    <h1 class="mt-6 font-ths06-display text-[clamp(42px,7vw,80px)] leading-[0.96] font-extrabold tracking-[-0.035em] text-balance">Your portfolio, <em class="text-ths06-coral">animated.</em></h1>
    <p class="mx-auto mt-5 max-w-[29rem] text-[17px] leading-relaxed text-ths06-body">Drop in your projects. We turn them into the kind of motion reel that gets the call back.</p>
    <div class="mt-9 flex flex-wrap items-center justify-center gap-5">
      <a href="#start" class="inline-flex min-h-12 items-center rounded border-[3px] border-ths06-ink bg-ths06-lemon px-7 text-[15px] font-extrabold text-ths06-ink shadow-[6px_6px_0_var(--color-ths06-ink)] transition hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-[3px_3px_0_var(--color-ths06-ink)] active:translate-x-1.5 active:translate-y-1.5 active:shadow-none focus-visible:outline-3 focus-visible:outline-offset-4 focus-visible:outline-ths06-coral motion-reduce:transition-none">Play with it</a>
      <label class="inline-flex min-h-11 cursor-pointer items-center gap-2 font-ths06-mono text-xs font-medium text-ths06-body select-none has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-ths06-ink">
        <input id="ths06-pause" type="checkbox" class="peer sr-only">
        <span aria-hidden="true" class="relative h-5 w-9 rounded-full bg-ths06-ink/20 transition after:absolute after:top-0.5 after:left-0.5 after:size-4 after:rounded-full after:bg-white after:transition after:content-[''] peer-checked:bg-ths06-ink peer-checked:after:translate-x-4"></span>
        Pause motion
      </label>
    </div>
  </div>
</section>
@import "tailwindcss";

@theme {
  --color-ths06-bg: #f4f1ea;
  --color-ths06-bg: oklch(0.959 0.01 87.5);
  --color-ths06-ink: #0b1f4a;
  --color-ths06-ink: oklch(0.253 0.084 263);
  --color-ths06-body: #3f4d6d;
  --color-ths06-body: oklch(0.422 0.057 265.9);
  --color-ths06-lemon: #f5d028;
  --color-ths06-lemon: oklch(0.864 0.169 95.2);
  --color-ths06-coral: #e0474a;
  --color-ths06-coral: oklch(0.616 0.19 23.6);
  --color-ths06-sky: #8fd3f4;
  --color-ths06-sky: oklch(0.833 0.083 229.9);
  --font-ths06-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-ths06-sans: 'Geist', system-ui, sans-serif;
  --font-ths06-mono: 'JetBrains Mono', ui-monospace, monospace;
  --animate-ths06-float: ths06-float 8s ease-in-out infinite alternate;

  @keyframes ths06-float {
    0% {
      transform: translate(0, 0);
    }

    100% {
      transform: translate(20px, -16px) rotate(8deg);
    }
  }
}
/* 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-06 {
  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-ths06-bg: #f4f1ea;
  --color-ths06-bg: oklch(0.959 0.01 87.5);
  --color-ths06-ink: #0b1f4a;
  --color-ths06-ink: oklch(0.253 0.084 263);
  --color-ths06-body: #3f4d6d;
  --color-ths06-body: oklch(0.422 0.057 265.9);
  --color-ths06-lemon: #f5d028;
  --color-ths06-lemon: oklch(0.864 0.169 95.2);
  --color-ths06-coral: #e0474a;
  --color-ths06-coral: oklch(0.616 0.19 23.6);
  --color-ths06-sky: #8fd3f4;
  --color-ths06-sky: oklch(0.833 0.083 229.9);
  --font-ths06-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-ths06-sans: 'Geist', system-ui, sans-serif;
  --font-ths06-mono: 'JetBrains Mono', ui-monospace, monospace;
  --animate-ths06-float: ths06-float 8s ease-in-out infinite alternate;

  @keyframes ths06-float {
    0% {
      transform: translate(0, 0);
    }

    100% {
      transform: translate(20px, -16px) rotate(8deg);
    }
  }
}
/* 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-06 {
  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=Bricolage+Grotesque:opsz,wght@12..96,500..800&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.

  • Two keyframe sets collapsed into one; the triangle's second animation is now [animation-direction:alternate-reverse].
  • The border-trick triangle became a clip-path polygon, so it can take a fill, a gradient or an image.
  • UI upgrade from the CSS original: the shapes' rotate(-12deg) tilt was silently erased by the animation; v4's standalone rotate keeps it.
  • UI upgrade: a zero-JS Pause motion switch (has-[:checked]), shapes that scale with clamp() on phones, and a pressed state on the CTA.
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: Tailwind Hero Section with Animated Geometric Shapes Background
Source: https://codefronts.com/layouts/tailwind-css-hero-sections/tailwind-hero-section-animated-geometric-shapes/

A Memphis-modern alternative to a video background — circle, triangle, pill and square float in a loop behind cobalt-on-bone copy with a lemon neo-brutalist CTA. No video file, no licensing, no layout shift.
## HTML
```html
<section class="ths-06 relative isolate grid w-full min-h-svh place-items-center overflow-hidden bg-ths06-bg px-5 py-16 font-ths06-sans text-ths06-ink sm:px-14 has-[#ths06-pause:checked]:[&_[data-shape]]:[animation-play-state:paused]" aria-label="Hero with animated geometric shapes">
  <div aria-hidden="true" class="pointer-events-none absolute inset-0 -z-10">
    <span data-shape class="absolute top-[8%] left-[6%] size-[clamp(64px,10vw,110px)] animate-ths06-float rounded-full bg-ths06-ink motion-reduce:animate-none"></span>
    <span data-shape class="absolute top-[12%] right-[10%] h-[clamp(70px,11vw,120px)] w-[clamp(80px,13vw,140px)] animate-ths06-float bg-ths06-lemon [animation-delay:-3s] [animation-direction:alternate-reverse] [clip-path:polygon(50%_0,100%_100%,0_100%)] motion-reduce:animate-none"></span>
    <span data-shape class="absolute bottom-[10%] left-[12%] h-[clamp(34px,5vw,50px)] w-[clamp(96px,14vw,140px)] rotate-[-12deg] animate-ths06-float rounded-full bg-ths06-coral [animation-delay:-5s] motion-reduce:animate-none"></span>
    <span data-shape class="absolute right-[8%] bottom-[8%] size-[clamp(56px,9vw,90px)] rotate-[15deg] animate-ths06-float rounded-xl border-[3px] border-ths06-ink bg-ths06-sky [animation-delay:-7s] motion-reduce:animate-none"></span>
    <span data-shape class="absolute top-[46%] left-[3%] size-6 animate-ths06-float rounded-full border-[3px] border-ths06-coral [animation-delay:-2s] motion-reduce:animate-none"></span>
  </div>
  <div class="max-w-[40rem] text-center">
    <span class="inline-flex items-center gap-2 bg-ths06-ink px-3 py-1 font-ths06-mono text-[11px] font-bold tracking-[0.18em] text-ths06-lemon">▸ NOW PLAYING</span>
    <h1 class="mt-6 font-ths06-display text-[clamp(42px,7vw,80px)] leading-[0.96] font-extrabold tracking-[-0.035em] text-balance">Your portfolio, <em class="text-ths06-coral">animated.</em></h1>
    <p class="mx-auto mt-5 max-w-[29rem] text-[17px] leading-relaxed text-ths06-body">Drop in your projects. We turn them into the kind of motion reel that gets the call back.</p>
    <div class="mt-9 flex flex-wrap items-center justify-center gap-5">
      <a href="#start" class="inline-flex min-h-12 items-center rounded border-[3px] border-ths06-ink bg-ths06-lemon px-7 text-[15px] font-extrabold text-ths06-ink shadow-[6px_6px_0_var(--color-ths06-ink)] transition hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-[3px_3px_0_var(--color-ths06-ink)] active:translate-x-1.5 active:translate-y-1.5 active:shadow-none focus-visible:outline-3 focus-visible:outline-offset-4 focus-visible:outline-ths06-coral motion-reduce:transition-none">Play with it</a>
      <label class="inline-flex min-h-11 cursor-pointer items-center gap-2 font-ths06-mono text-xs font-medium text-ths06-body select-none has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-ths06-ink">
        <input id="ths06-pause" type="checkbox" class="peer sr-only">
        <span aria-hidden="true" class="relative h-5 w-9 rounded-full bg-ths06-ink/20 transition after:absolute after:top-0.5 after:left-0.5 after:size-4 after:rounded-full after:bg-white after:transition after:content-[''] peer-checked:bg-ths06-ink peer-checked:after:translate-x-4"></span>
        Pause motion
      </label>
    </div>
  </div>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-ths06-bg: #f4f1ea;
  --color-ths06-bg: oklch(0.959 0.01 87.5);
  --color-ths06-ink: #0b1f4a;
  --color-ths06-ink: oklch(0.253 0.084 263);
  --color-ths06-body: #3f4d6d;
  --color-ths06-body: oklch(0.422 0.057 265.9);
  --color-ths06-lemon: #f5d028;
  --color-ths06-lemon: oklch(0.864 0.169 95.2);
  --color-ths06-coral: #e0474a;
  --color-ths06-coral: oklch(0.616 0.19 23.6);
  --color-ths06-sky: #8fd3f4;
  --color-ths06-sky: oklch(0.833 0.083 229.9);
  --font-ths06-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-ths06-sans: 'Geist', system-ui, sans-serif;
  --font-ths06-mono: 'JetBrains Mono', ui-monospace, monospace;
  --animate-ths06-float: ths06-float 8s ease-in-out infinite alternate;

  @keyframes ths06-float {
    0% {
      transform: translate(0, 0);
    }

    100% {
      transform: translate(20px, -16px) rotate(8deg);
    }
  }
}
/* 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-06 {
  width: 100%;
  min-height: 100svh;
}
```

How this works

Rotation and motion no longer collide. In the CSS original the keyframe's transform wiped out each shape's tilt. Tailwind v4's rotate-* writes the standalone rotate property, so the static tilt and the animated translate stack cleanly.

A pause switch with no script. A visually hidden checkbox lives in a label; the root uses has-[#ths06-pause:checked]:[&_[data-shape]]:[animation-play-state:paused], so ticking it freezes every shape — WCAG 2.2.2 for auto-playing motion.

Make it yours

  • Swap shapes: any element with data-shape and animate-ths06-float joins the loop.
  • Palette: edit --color-ths06-lemon and --color-ths06-coral.
  • Remove the pause control if motion is under 5 seconds.

Gotchas — read before shipping

  • Shapes are pointer-events-none; without it the circle can swallow clicks near the CTA on short viewports.
  • The arbitrary variant syntax [&_[data-shape]]: uses _ for the descendant space.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

:has() and individual transforms are inside Tailwind v4's floor.

Techniques used in this demo

Utilitiesfirst-class utility or variant

box-shadowtw ↗prefers-reduced-motiontw ↗

Arbitraryneeds bracket syntax

clip-pathtw ↗

Plain CSSno Tailwind surface

@keyframestw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →