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

Magazine Cover Hero Section in Tailwind CSS

A print-magazine cover — issue line, oversized italic serif headline, a vertical spine label, a foil-stamped issue number and a double-rule offset shadow. Plum and champagne on ruled linen, with cover lines that read like a real masthead.

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-11 grid w-full min-h-svh place-items-center bg-ths11-bg bg-[repeating-linear-gradient(0deg,transparent_0_47px,rgb(60_40_80/0.05)_47px_48px)] px-5 py-14 font-ths11-serif text-ths11-ink sm:px-10" aria-label="Magazine cover hero">
  <div class="relative w-full max-w-[46rem] border border-ths11-ink bg-ths11-paper py-[clamp(28px,4vw,56px)] pr-[clamp(24px,4vw,56px)] pl-[clamp(52px,7vw,80px)] shadow-[12px_12px_0_var(--color-ths11-gold),12px_12px_0_1px_var(--color-ths11-ink)]">
    <span class="absolute top-1/2 left-4 -translate-y-1/2 border-y border-ths11-wine px-1 py-3.5 font-ths11-mono text-[10.5px] tracking-[0.32em] whitespace-nowrap text-ths11-wine [writing-mode:vertical-rl]">Vol. XII · No. 47 · Spring</span>
    <span aria-hidden="true" class="absolute top-3 right-6 bg-linear-to-br from-ths11-gold via-ths11-foil to-ths11-gold bg-clip-text font-ths11-serif text-[clamp(44px,6vw,60px)] font-black text-transparent italic drop-shadow-[1px_1px_0_var(--color-ths11-ink)]">04</span>
    <header class="flex flex-wrap items-baseline gap-x-6 gap-y-1 border-b border-ths11-ink pb-4">
      <span class="font-ths11-mono text-[10.5px] font-bold tracking-[0.24em]">SPRING 2026 · INDEX NO. 04</span>
      <span class="font-ths11-mono text-[10.5px] tracking-[0.18em] text-ths11-mut">$14 US / £11 UK</span>
    </header>
    <h1 class="mt-6 text-[clamp(42px,7.4vw,84px)] leading-[0.94] font-semibold tracking-[-0.025em]">The Quiet <em class="block text-[1.2em] font-bold text-ths11-wine">Revolution</em> of slow type.</h1>
    <p class="mt-6 max-w-[29rem] font-ths11-body text-xl/snug text-ths11-mut italic">Why every serious editorial brand is going back to serifs, italics, and a single column wide enough to think in.</p>
    <div class="mt-8 flex flex-wrap items-end justify-between gap-6">
      <a href="#read" class="inline-flex min-h-11 items-center border-b-2 border-ths11-ink font-ths11-mono text-xs font-bold tracking-[0.16em] transition hover:border-ths11-wine hover:text-ths11-wine focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-ths11-wine">READ THE ISSUE →</a>
      <ul class="space-y-1 text-right font-ths11-mono text-[10.5px] tracking-[0.12em] text-ths11-mut">
        <li>P. 18 — The return of the italic</li>
        <li>P. 42 — Margins as manifesto</li>
      </ul>
    </div>
  </div>
</section>
@import "tailwindcss";

@theme {
  --color-ths11-bg: #ede4d3;
  --color-ths11-bg: oklch(0.921 0.025 83.4);
  --color-ths11-paper: #f7f1e1;
  --color-ths11-paper: oklch(0.959 0.022 89.8);
  --color-ths11-ink: #2a1f3a;
  --color-ths11-ink: oklch(0.266 0.051 301.8);
  --color-ths11-mut: #4a3858;
  --color-ths11-mut: oklch(0.374 0.058 309.5);
  --color-ths11-wine: #6b1f4a;
  --color-ths11-wine: oklch(0.374 0.118 349.4);
  --color-ths11-gold: #c69e5a;
  --color-ths11-gold: oklch(0.722 0.099 79.5);
  --color-ths11-foil: #f3dca0;
  --color-ths11-foil: oklch(0.899 0.081 89.5);
  --font-ths11-serif: 'Playfair Display', Georgia, serif;
  --font-ths11-body: 'Cormorant Garamond', Georgia, serif;
  --font-ths11-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-11 {
  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-ths11-bg: #ede4d3;
  --color-ths11-bg: oklch(0.921 0.025 83.4);
  --color-ths11-paper: #f7f1e1;
  --color-ths11-paper: oklch(0.959 0.022 89.8);
  --color-ths11-ink: #2a1f3a;
  --color-ths11-ink: oklch(0.266 0.051 301.8);
  --color-ths11-mut: #4a3858;
  --color-ths11-mut: oklch(0.374 0.058 309.5);
  --color-ths11-wine: #6b1f4a;
  --color-ths11-wine: oklch(0.374 0.118 349.4);
  --color-ths11-gold: #c69e5a;
  --color-ths11-gold: oklch(0.722 0.099 79.5);
  --color-ths11-foil: #f3dca0;
  --color-ths11-foil: oklch(0.899 0.081 89.5);
  --font-ths11-serif: 'Playfair Display', Georgia, serif;
  --font-ths11-body: 'Cormorant Garamond', Georgia, serif;
  --font-ths11-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-11 {
  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,600..900;1,600..900&family=Cormorant+Garamond:ital,wght@1,500&family=JetBrains+Mono:wght@500;700&display=swap">

What changed in the port

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

  • writing-mode has no Tailwind utility, so it stays an arbitrary property — one of the few places the port reaches for brackets.
  • UI upgrade from the CSS original: the issue number became a foil gradient, the masthead gained a cover price, and two cover lines balance the CTA row like a real newsstand cover.
  • UI upgrade: the CTA is a 44px target with a focus ring; the headline is the page's <h1>.
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: Magazine Cover Hero Section in Tailwind CSS
Source: https://codefronts.com/layouts/tailwind-css-hero-sections/tailwind-magazine-cover-hero-section/

A print-magazine cover — issue line, oversized italic serif headline, a vertical spine label, a foil-stamped issue number and a double-rule offset shadow. Plum and champagne on ruled linen, with cover lines that read like a real masthead.
## HTML
```html
<section class="ths-11 grid w-full min-h-svh place-items-center bg-ths11-bg bg-[repeating-linear-gradient(0deg,transparent_0_47px,rgb(60_40_80/0.05)_47px_48px)] px-5 py-14 font-ths11-serif text-ths11-ink sm:px-10" aria-label="Magazine cover hero">
  <div class="relative w-full max-w-[46rem] border border-ths11-ink bg-ths11-paper py-[clamp(28px,4vw,56px)] pr-[clamp(24px,4vw,56px)] pl-[clamp(52px,7vw,80px)] shadow-[12px_12px_0_var(--color-ths11-gold),12px_12px_0_1px_var(--color-ths11-ink)]">
    <span class="absolute top-1/2 left-4 -translate-y-1/2 border-y border-ths11-wine px-1 py-3.5 font-ths11-mono text-[10.5px] tracking-[0.32em] whitespace-nowrap text-ths11-wine [writing-mode:vertical-rl]">Vol. XII · No. 47 · Spring</span>
    <span aria-hidden="true" class="absolute top-3 right-6 bg-linear-to-br from-ths11-gold via-ths11-foil to-ths11-gold bg-clip-text font-ths11-serif text-[clamp(44px,6vw,60px)] font-black text-transparent italic drop-shadow-[1px_1px_0_var(--color-ths11-ink)]">04</span>
    <header class="flex flex-wrap items-baseline gap-x-6 gap-y-1 border-b border-ths11-ink pb-4">
      <span class="font-ths11-mono text-[10.5px] font-bold tracking-[0.24em]">SPRING 2026 · INDEX NO. 04</span>
      <span class="font-ths11-mono text-[10.5px] tracking-[0.18em] text-ths11-mut">$14 US / £11 UK</span>
    </header>
    <h1 class="mt-6 text-[clamp(42px,7.4vw,84px)] leading-[0.94] font-semibold tracking-[-0.025em]">The Quiet <em class="block text-[1.2em] font-bold text-ths11-wine">Revolution</em> of slow type.</h1>
    <p class="mt-6 max-w-[29rem] font-ths11-body text-xl/snug text-ths11-mut italic">Why every serious editorial brand is going back to serifs, italics, and a single column wide enough to think in.</p>
    <div class="mt-8 flex flex-wrap items-end justify-between gap-6">
      <a href="#read" class="inline-flex min-h-11 items-center border-b-2 border-ths11-ink font-ths11-mono text-xs font-bold tracking-[0.16em] transition hover:border-ths11-wine hover:text-ths11-wine focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-ths11-wine">READ THE ISSUE →</a>
      <ul class="space-y-1 text-right font-ths11-mono text-[10.5px] tracking-[0.12em] text-ths11-mut">
        <li>P. 18 — The return of the italic</li>
        <li>P. 42 — Margins as manifesto</li>
      </ul>
    </div>
  </div>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-ths11-bg: #ede4d3;
  --color-ths11-bg: oklch(0.921 0.025 83.4);
  --color-ths11-paper: #f7f1e1;
  --color-ths11-paper: oklch(0.959 0.022 89.8);
  --color-ths11-ink: #2a1f3a;
  --color-ths11-ink: oklch(0.266 0.051 301.8);
  --color-ths11-mut: #4a3858;
  --color-ths11-mut: oklch(0.374 0.058 309.5);
  --color-ths11-wine: #6b1f4a;
  --color-ths11-wine: oklch(0.374 0.118 349.4);
  --color-ths11-gold: #c69e5a;
  --color-ths11-gold: oklch(0.722 0.099 79.5);
  --color-ths11-foil: #f3dca0;
  --color-ths11-foil: oklch(0.899 0.081 89.5);
  --font-ths11-serif: 'Playfair Display', Georgia, serif;
  --font-ths11-body: 'Cormorant Garamond', Georgia, serif;
  --font-ths11-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-11 {
  width: 100%;
  min-height: 100svh;
}
```

How this works

Two shadows, one outline. The cover's offset is a stack: a solid champagne shadow, then the same shadow spread by 1px in ink. Together they draw an outlined block behind the frame — a print trick in one arbitrary utility.

Foil, not flat. The issue number uses a three-stop gold gradient clipped to the text with bg-clip-text text-transparent, plus an ink drop-shadow for the stamped edge.

Make it yours

  • Issue details: edit the spine, issue line and number together.
  • Monochrome: set --color-ths11-gold to the ink colour for a stark cover.
  • Add a cover image: put an <img> behind the headline with mix-blend-multiply.

Gotchas — read before shipping

  • Vertical text is measured sideways: whitespace-nowrap on the spine stops it wrapping into two columns.
  • On narrow screens the spine overlaps copy; the left padding grows with pl-[clamp(52px,7vw,80px)] to clear it.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

writing-mode and background-clip:text are universal.

Techniques used in this demo

Utilitiesfirst-class utility or variant

box-shadowtw ↗

Arbitraryneeds bracket syntax

clamp()tw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →