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

Bento Grid Hero Section in Tailwind CSS

An Apple-style bento hero — one large headline tile with stat, testimonial, rating and download tiles around it. Matte-ceramic palette: salmon, terracotta, ivory and olive. Tiles lift on hover; whole tiles are clickable where they should be.

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-19 grid w-full min-h-svh grid-cols-1 gap-3.5 bg-ths19-bg p-4 font-ths19-sans text-ths19-ink [grid-template-areas:'hero'_'stat'_'quote'_'pill'_'cta'] sm:grid-cols-2 sm:p-6 sm:[grid-template-areas:'hero_hero'_'stat_quote'_'pill_cta'] lg:grid-cols-[1.4fr_0.8fr_0.8fr] lg:grid-rows-[1fr_1fr_auto] lg:p-8 lg:[grid-template-areas:'hero_hero_stat'_'hero_hero_quote'_'pill_cta_quote']" aria-label="Bento grid hero">
  <article class="flex min-h-[340px] flex-col justify-between gap-6 rounded-3xl bg-linear-160 from-ths19-salmon to-ths19-terra p-7 [grid-area:hero] sm:p-10">
    <span class="self-start rounded-full bg-ths19-ink px-3 py-1 font-ths19-mono text-[11px] font-bold tracking-[0.16em] text-ths19-bg">V2 — OUT NOW</span>
    <h1 class="max-w-[16ch] font-ths19-serif text-[clamp(38px,5.4vw,68px)] leading-[1.02] font-semibold tracking-[-0.015em] text-balance">The pottery <em class="text-ths19-ox">workbook</em> for serious hands.</h1>
    <div class="flex flex-wrap items-center gap-4">
      <a href="#start" class="inline-flex min-h-12 items-center rounded-full bg-ths19-ink px-6 text-[15px] font-semibold text-ths19-bg transition hover:bg-ths19-ox focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-ths19-ink motion-reduce:transition-none">Start the kiln →</a>
      <span class="text-sm font-medium text-ths19-ink/80">Free for 30 pieces</span>
    </div>
  </article>
  <article class="flex flex-col justify-between gap-3 rounded-3xl bg-ths19-olive p-6 text-ths19-bg transition hover:-translate-y-1 hover:shadow-[0_18px_30px_-16px_rgb(44_31_21/0.5)] motion-reduce:transition-none [grid-area:stat]">
    <span class="font-ths19-mono text-[11px] tracking-[0.14em] uppercase">Logged this month</span>
    <div><strong class="block font-ths19-serif text-[clamp(48px,5.4vw,72px)] leading-none font-bold">1,400</strong><span class="mt-1 block text-sm">hand-thrown pieces</span></div>
  </article>
  <figure class="flex flex-col justify-between gap-6 rounded-3xl bg-ths19-ink p-6 text-ths19-bg transition hover:-translate-y-1 hover:shadow-[0_18px_30px_-16px_rgb(44_31_21/0.5)] motion-reduce:transition-none [grid-area:quote]">
    <span aria-hidden="true" class="font-ths19-serif text-6xl leading-[0.5] text-ths19-salmon">“</span>
    <blockquote class="font-ths19-serif text-2xl/snug italic">Replaced three notebooks and a chalkboard. My glaze tests finally make sense.</blockquote>
    <figcaption class="flex items-center gap-3 text-xs tracking-[0.04em] text-ths19-bg/80"><span aria-hidden="true" class="grid size-8 place-items-center rounded-full bg-ths19-terra text-[11px] font-bold text-ths19-ink">MR</span>Mireya R. · Studio Verde</figcaption>
  </figure>
  <article class="flex items-center justify-between gap-3 rounded-3xl border-2 border-ths19-ink bg-ths19-bg px-6 py-5 [grid-area:pill]">
    <span><span role="img" aria-label="Rated 4.9 out of 5" class="text-xl font-extrabold text-ths19-gold">★ 4.9</span><span class="block text-xs text-ths19-ink/75">2,310 ratings</span></span>
    <span class="font-ths19-mono text-[11px] tracking-[0.1em] uppercase">App Store</span>
  </article>
  <a href="#android" class="flex min-h-20 items-center justify-between rounded-3xl bg-ths19-terra px-6 text-[15px] font-bold text-ths19-ink transition hover:-translate-y-1 hover:bg-ths19-salmon focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-ths19-ink motion-reduce:transition-none [grid-area:cta]">Get it on Android <span aria-hidden="true" class="grid size-9 place-items-center rounded-full bg-ths19-ink text-ths19-bg">→</span></a>
</section>
@import "tailwindcss";

@theme {
  --color-ths19-bg: #f5ebde;
  --color-ths19-bg: oklch(0.944 0.02 74.7);
  --color-ths19-ink: #2c1f15;
  --color-ths19-ink: oklch(0.252 0.027 58.7);
  --color-ths19-salmon: #f4a48b;
  --color-ths19-salmon: oklch(0.791 0.102 38.1);
  --color-ths19-terra: #d97766;
  --color-ths19-terra: oklch(0.675 0.126 31);
  --color-ths19-ox: #6b1f12;
  --color-ths19-ox: oklch(0.359 0.111 32.2);
  --color-ths19-olive: #56702f;
  --color-ths19-olive: oklch(0.509 0.097 127.7);
  --color-ths19-gold: #9c7a2a;
  --color-ths19-gold: oklch(0.598 0.105 85.1);
  --font-ths19-serif: 'Cormorant Garamond', Georgia, serif;
  --font-ths19-sans: 'Geist', system-ui, sans-serif;
  --font-ths19-mono: 'JetBrains Mono', ui-monospace, monospace;
}
/* 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-19 {
  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-ths19-bg: #f5ebde;
  --color-ths19-bg: oklch(0.944 0.02 74.7);
  --color-ths19-ink: #2c1f15;
  --color-ths19-ink: oklch(0.252 0.027 58.7);
  --color-ths19-salmon: #f4a48b;
  --color-ths19-salmon: oklch(0.791 0.102 38.1);
  --color-ths19-terra: #d97766;
  --color-ths19-terra: oklch(0.675 0.126 31);
  --color-ths19-ox: #6b1f12;
  --color-ths19-ox: oklch(0.359 0.111 32.2);
  --color-ths19-olive: #56702f;
  --color-ths19-olive: oklch(0.509 0.097 127.7);
  --color-ths19-gold: #9c7a2a;
  --color-ths19-gold: oklch(0.598 0.105 85.1);
  --font-ths19-serif: 'Cormorant Garamond', Georgia, serif;
  --font-ths19-sans: 'Geist', system-ui, sans-serif;
  --font-ths19-mono: 'JetBrains Mono', ui-monospace, monospace;
}
/* 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-19 {
  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;0,700;1,500;1,600&family=Geist:wght@400;500;600;700&family=JetBrains+Mono:wght@600;700&display=swap">

What changed in the port

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

  • grid-template-areas stayed a declaration — as three arbitrary properties, one per breakpoint, instead of a base rule plus a media override.
  • The padding: 0 !important hack on the CTA tile disappeared: the tile is the link.
  • UI upgrade from the CSS original: a one-column phone layout (the original squeezed two columns at 360px), hover lift on tiles, and a semantic <figure> testimonial with avatar.
  • UI upgrade: rating announced via role=img, a rating count, olive darkened for 4.8:1 white text, and a free-tier line under 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: Bento Grid Hero Section in Tailwind CSS
Source: https://codefronts.com/layouts/tailwind-css-hero-sections/tailwind-bento-grid-hero-section/

An Apple-style bento hero — one large headline tile with stat, testimonial, rating and download tiles around it. Matte-ceramic palette: salmon, terracotta, ivory and olive. Tiles lift on hover; whole tiles are clickable where they should be.
## HTML
```html
<section class="ths-19 grid w-full min-h-svh grid-cols-1 gap-3.5 bg-ths19-bg p-4 font-ths19-sans text-ths19-ink [grid-template-areas:'hero'_'stat'_'quote'_'pill'_'cta'] sm:grid-cols-2 sm:p-6 sm:[grid-template-areas:'hero_hero'_'stat_quote'_'pill_cta'] lg:grid-cols-[1.4fr_0.8fr_0.8fr] lg:grid-rows-[1fr_1fr_auto] lg:p-8 lg:[grid-template-areas:'hero_hero_stat'_'hero_hero_quote'_'pill_cta_quote']" aria-label="Bento grid hero">
  <article class="flex min-h-[340px] flex-col justify-between gap-6 rounded-3xl bg-linear-160 from-ths19-salmon to-ths19-terra p-7 [grid-area:hero] sm:p-10">
    <span class="self-start rounded-full bg-ths19-ink px-3 py-1 font-ths19-mono text-[11px] font-bold tracking-[0.16em] text-ths19-bg">V2 — OUT NOW</span>
    <h1 class="max-w-[16ch] font-ths19-serif text-[clamp(38px,5.4vw,68px)] leading-[1.02] font-semibold tracking-[-0.015em] text-balance">The pottery <em class="text-ths19-ox">workbook</em> for serious hands.</h1>
    <div class="flex flex-wrap items-center gap-4">
      <a href="#start" class="inline-flex min-h-12 items-center rounded-full bg-ths19-ink px-6 text-[15px] font-semibold text-ths19-bg transition hover:bg-ths19-ox focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-ths19-ink motion-reduce:transition-none">Start the kiln →</a>
      <span class="text-sm font-medium text-ths19-ink/80">Free for 30 pieces</span>
    </div>
  </article>
  <article class="flex flex-col justify-between gap-3 rounded-3xl bg-ths19-olive p-6 text-ths19-bg transition hover:-translate-y-1 hover:shadow-[0_18px_30px_-16px_rgb(44_31_21/0.5)] motion-reduce:transition-none [grid-area:stat]">
    <span class="font-ths19-mono text-[11px] tracking-[0.14em] uppercase">Logged this month</span>
    <div><strong class="block font-ths19-serif text-[clamp(48px,5.4vw,72px)] leading-none font-bold">1,400</strong><span class="mt-1 block text-sm">hand-thrown pieces</span></div>
  </article>
  <figure class="flex flex-col justify-between gap-6 rounded-3xl bg-ths19-ink p-6 text-ths19-bg transition hover:-translate-y-1 hover:shadow-[0_18px_30px_-16px_rgb(44_31_21/0.5)] motion-reduce:transition-none [grid-area:quote]">
    <span aria-hidden="true" class="font-ths19-serif text-6xl leading-[0.5] text-ths19-salmon">“</span>
    <blockquote class="font-ths19-serif text-2xl/snug italic">Replaced three notebooks and a chalkboard. My glaze tests finally make sense.</blockquote>
    <figcaption class="flex items-center gap-3 text-xs tracking-[0.04em] text-ths19-bg/80"><span aria-hidden="true" class="grid size-8 place-items-center rounded-full bg-ths19-terra text-[11px] font-bold text-ths19-ink">MR</span>Mireya R. · Studio Verde</figcaption>
  </figure>
  <article class="flex items-center justify-between gap-3 rounded-3xl border-2 border-ths19-ink bg-ths19-bg px-6 py-5 [grid-area:pill]">
    <span><span role="img" aria-label="Rated 4.9 out of 5" class="text-xl font-extrabold text-ths19-gold">★ 4.9</span><span class="block text-xs text-ths19-ink/75">2,310 ratings</span></span>
    <span class="font-ths19-mono text-[11px] tracking-[0.1em] uppercase">App Store</span>
  </article>
  <a href="#android" class="flex min-h-20 items-center justify-between rounded-3xl bg-ths19-terra px-6 text-[15px] font-bold text-ths19-ink transition hover:-translate-y-1 hover:bg-ths19-salmon focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-ths19-ink motion-reduce:transition-none [grid-area:cta]">Get it on Android <span aria-hidden="true" class="grid size-9 place-items-center rounded-full bg-ths19-ink text-ths19-bg">→</span></a>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-ths19-bg: #f5ebde;
  --color-ths19-bg: oklch(0.944 0.02 74.7);
  --color-ths19-ink: #2c1f15;
  --color-ths19-ink: oklch(0.252 0.027 58.7);
  --color-ths19-salmon: #f4a48b;
  --color-ths19-salmon: oklch(0.791 0.102 38.1);
  --color-ths19-terra: #d97766;
  --color-ths19-terra: oklch(0.675 0.126 31);
  --color-ths19-ox: #6b1f12;
  --color-ths19-ox: oklch(0.359 0.111 32.2);
  --color-ths19-olive: #56702f;
  --color-ths19-olive: oklch(0.509 0.097 127.7);
  --color-ths19-gold: #9c7a2a;
  --color-ths19-gold: oklch(0.598 0.105 85.1);
  --font-ths19-serif: 'Cormorant Garamond', Georgia, serif;
  --font-ths19-sans: 'Geist', system-ui, sans-serif;
  --font-ths19-mono: 'JetBrains Mono', ui-monospace, monospace;
}
/* 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-19 {
  width: 100%;
  min-height: 100svh;
}
```

How this works

Areas as one string. Tailwind has no grid-template-areas utility, but an arbitrary property takes the whole map — quotes and all — with underscores for spaces. Each breakpoint gets its own map: two columns on tablets, a single column on phones.

Tiles that act. The download tile is the link itself (not a link inside a padded box), so the whole tile is the hit area with a focus ring that follows its rounded corners.

Make it yours

  • Re-map the grid: edit the area strings — no tile markup changes.
  • Add a tile: give it [grid-area:new] and add new to the map.
  • Flatter look: drop the gradient on the hero tile for a solid salmon.

Gotchas — read before shipping

  • Every row in an area map needs the same column count, or the whole declaration is invalid.
  • Named areas must form rectangles — an L-shaped hero is ignored.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

Grid template areas are universal.

Techniques used in this demo

Utilitiesfirst-class utility or variant

gridtw ↗linear gradienttw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →