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

Asymmetric Typography Hero Section in Tailwind CSS

Construction-site asymmetric typography — three headline lines stepping across a broken grid, a hi-vis outlined word, a giant italic ampersand and an animated caution-tape stripe. Safety yellow on concrete grey, hard black rules. Collapses to a clean stack on phones.

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-12 grid w-full min-h-svh overflow-hidden bg-ths12-bg bg-[radial-gradient(rgb(0_0_0/0.06)_1px,transparent_1px)] bg-size-[14px_14px] p-5 font-ths12-sans text-ths12-ink sm:p-10" aria-label="Asymmetric typography hero">
  <div class="grid w-full content-between gap-6 md:grid-cols-[1fr_1fr_0.6fr]">
    <div class="flex items-center justify-between md:col-span-3">
      <span class="bg-ths12-hivis px-2.5 py-1 font-ths12-mono text-[11px] font-bold tracking-[0.2em]">/ ZONE 4</span>
      <span class="font-ths12-mono text-[11px] font-bold tracking-[0.2em]">BUILD #2.418 · GREEN</span>
    </div>
    <h1 class="font-ths12-sans leading-[0.85] font-black tracking-[-0.04em] uppercase [font-stretch:115%] md:col-span-3">
      <span class="block text-[clamp(56px,12vw,150px)]">Under</span>
      <span class="block text-[clamp(34px,7vw,92px)] text-ths12-hivis [font-stretch:100%] [-webkit-text-stroke:2px_var(--color-ths12-ink)] md:ml-[clamp(24px,8vw,150px)]">construction.</span>
      <span class="block text-[clamp(34px,7vw,92px)] [font-stretch:100%] md:ml-[clamp(48px,18vw,320px)]">Always.</span>
    </h1>
    <p class="max-w-sm self-end border-l-4 border-ths12-hivis pl-4 text-[15px] leading-relaxed text-ths12-body md:col-span-2">Software you ship is software that's still being built. We make CI fast enough to do it on the dev's terms — not the build's.</p>
    <span aria-hidden="true" class="hidden self-end justify-self-end font-ths12-serif text-[clamp(80px,14vw,170px)] leading-none font-extrabold italic md:block">&amp;</span>
    <a href="#start" class="inline-flex min-h-12 items-center justify-self-start bg-ths12-ink px-7 font-ths12-mono text-sm font-extrabold tracking-[0.16em] text-ths12-hivis transition hover:bg-ths12-hivis hover:text-ths12-ink hover:shadow-[0_0_0_2px_var(--color-ths12-ink)] focus-visible:outline-3 focus-visible:outline-offset-4 focus-visible:outline-ths12-ink motion-reduce:transition-none">DEPLOY →</a>
    <span aria-hidden="true" class="h-4 animate-ths12-tape self-center bg-[repeating-linear-gradient(45deg,var(--color-ths12-ink)_0_12px,var(--color-ths12-hivis)_12px_24px)] bg-size-[34px_34px] motion-reduce:animate-none md:col-span-2"></span>
  </div>
</section>
@import "tailwindcss";

@theme {
  --color-ths12-bg: #c8c4be;
  --color-ths12-bg: oklch(0.822 0.009 78.3);
  --color-ths12-ink: #0a0a0a;
  --color-ths12-ink: oklch(0.145 0 0);
  --color-ths12-body: #1f1f1f;
  --color-ths12-body: oklch(0.239 0 0);
  --color-ths12-hivis: #f5d028;
  --color-ths12-hivis: oklch(0.864 0.169 95.2);
  --font-ths12-sans: 'Archivo', system-ui, sans-serif;
  --font-ths12-serif: 'Playfair Display', Georgia, serif;
  --font-ths12-mono: 'JetBrains Mono', ui-monospace, monospace;
  --animate-ths12-tape: ths12-tape 1.2s linear infinite;

  @keyframes ths12-tape {
    to {
      background-position: 34px 0;
    }
  }
}
/* 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-12 {
  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-ths12-bg: #c8c4be;
  --color-ths12-bg: oklch(0.822 0.009 78.3);
  --color-ths12-ink: #0a0a0a;
  --color-ths12-ink: oklch(0.145 0 0);
  --color-ths12-body: #1f1f1f;
  --color-ths12-body: oklch(0.239 0 0);
  --color-ths12-hivis: #f5d028;
  --color-ths12-hivis: oklch(0.864 0.169 95.2);
  --font-ths12-sans: 'Archivo', system-ui, sans-serif;
  --font-ths12-serif: 'Playfair Display', Georgia, serif;
  --font-ths12-mono: 'JetBrains Mono', ui-monospace, monospace;
  --animate-ths12-tape: ths12-tape 1.2s linear infinite;

  @keyframes ths12-tape {
    to {
      background-position: 34px 0;
    }
  }
}
/* 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-12 {
  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=Archivo:wdth,wght@62..125,700..900&family=Playfair+Display:ital,wght@1,800&family=JetBrains+Mono:wght@700;800&display=swap">

What changed in the port

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

  • Explicit grid-row placement became source order plus md:col-span-* — fewer numbers to keep in sync.
  • UI upgrade from the CSS original: the stripe now crawls like real caution tape, a build-status label balances the tag, and a dot-grid concrete texture replaces the flat grey.
  • UI upgrade: Archivo at 115% width gives the headline real construction-signage heft; the ampersand hides on phones instead of colliding with the paragraph.
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: Asymmetric Typography Hero Section in Tailwind CSS
Source: https://codefronts.com/layouts/tailwind-css-hero-sections/tailwind-asymmetric-typography-hero-section/

Construction-site asymmetric typography — three headline lines stepping across a broken grid, a hi-vis outlined word, a giant italic ampersand and an animated caution-tape stripe. Safety yellow on concrete grey, hard black rules. Collapses to a clean stack on phones.
## HTML
```html
<section class="ths-12 grid w-full min-h-svh overflow-hidden bg-ths12-bg bg-[radial-gradient(rgb(0_0_0/0.06)_1px,transparent_1px)] bg-size-[14px_14px] p-5 font-ths12-sans text-ths12-ink sm:p-10" aria-label="Asymmetric typography hero">
  <div class="grid w-full content-between gap-6 md:grid-cols-[1fr_1fr_0.6fr]">
    <div class="flex items-center justify-between md:col-span-3">
      <span class="bg-ths12-hivis px-2.5 py-1 font-ths12-mono text-[11px] font-bold tracking-[0.2em]">/ ZONE 4</span>
      <span class="font-ths12-mono text-[11px] font-bold tracking-[0.2em]">BUILD #2.418 · GREEN</span>
    </div>
    <h1 class="font-ths12-sans leading-[0.85] font-black tracking-[-0.04em] uppercase [font-stretch:115%] md:col-span-3">
      <span class="block text-[clamp(56px,12vw,150px)]">Under</span>
      <span class="block text-[clamp(34px,7vw,92px)] text-ths12-hivis [font-stretch:100%] [-webkit-text-stroke:2px_var(--color-ths12-ink)] md:ml-[clamp(24px,8vw,150px)]">construction.</span>
      <span class="block text-[clamp(34px,7vw,92px)] [font-stretch:100%] md:ml-[clamp(48px,18vw,320px)]">Always.</span>
    </h1>
    <p class="max-w-sm self-end border-l-4 border-ths12-hivis pl-4 text-[15px] leading-relaxed text-ths12-body md:col-span-2">Software you ship is software that's still being built. We make CI fast enough to do it on the dev's terms — not the build's.</p>
    <span aria-hidden="true" class="hidden self-end justify-self-end font-ths12-serif text-[clamp(80px,14vw,170px)] leading-none font-extrabold italic md:block">&amp;</span>
    <a href="#start" class="inline-flex min-h-12 items-center justify-self-start bg-ths12-ink px-7 font-ths12-mono text-sm font-extrabold tracking-[0.16em] text-ths12-hivis transition hover:bg-ths12-hivis hover:text-ths12-ink hover:shadow-[0_0_0_2px_var(--color-ths12-ink)] focus-visible:outline-3 focus-visible:outline-offset-4 focus-visible:outline-ths12-ink motion-reduce:transition-none">DEPLOY →</a>
    <span aria-hidden="true" class="h-4 animate-ths12-tape self-center bg-[repeating-linear-gradient(45deg,var(--color-ths12-ink)_0_12px,var(--color-ths12-hivis)_12px_24px)] bg-size-[34px_34px] motion-reduce:animate-none md:col-span-2"></span>
  </div>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-ths12-bg: #c8c4be;
  --color-ths12-bg: oklch(0.822 0.009 78.3);
  --color-ths12-ink: #0a0a0a;
  --color-ths12-ink: oklch(0.145 0 0);
  --color-ths12-body: #1f1f1f;
  --color-ths12-body: oklch(0.239 0 0);
  --color-ths12-hivis: #f5d028;
  --color-ths12-hivis: oklch(0.864 0.169 95.2);
  --font-ths12-sans: 'Archivo', system-ui, sans-serif;
  --font-ths12-serif: 'Playfair Display', Georgia, serif;
  --font-ths12-mono: 'JetBrains Mono', ui-monospace, monospace;
  --animate-ths12-tape: ths12-tape 1.2s linear infinite;

  @keyframes ths12-tape {
    to {
      background-position: 34px 0;
    }
  }
}
/* 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-12 {
  width: 100%;
  min-height: 100svh;
}
```

How this works

Misalignment is the design. Each headline line is a block with its own size and a growing left margin — but only from md: up. On phones the indents drop to zero so the words never push off-screen (the CSS original needed a max-width override for this).

The tape moves. The stripe is a 45° repeating gradient whose background-position animates by exactly one tile (34px), so the crawl loops seamlessly; motion-reduce:animate-none freezes it.

Make it yours

  • Reorder the steps by changing the md:ml-* values per line.
  • Swap palette: --color-ths12-hivis to #ff6b1a for traffic-cone orange.
  • Remove the ampersand for a cleaner right column.

Gotchas — read before shipping

  • Text stroke paints centred on the glyph edge; at small sizes use 1px or the counters fill in.
  • The stripe tile size must match the animation distance or the loop visibly jumps.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

-webkit-text-stroke is supported unprefixed-in-practice in all three engines.

Techniques used in this demo

Utilitiesfirst-class utility or variant

gridtw ↗

Arbitraryneeds bracket syntax

repeating linear gradienttw ↗clamp()tw ↗

Plain CSSno Tailwind surface

@keyframestw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →