Tailwind CSS Marketing Pages
1. Hero Section Patterns
| Variant |
Structure |
Best For |
| Simple centered |
Centered heading + subtext + CTA button pair |
SaaS landing pages |
| Split with image |
2-col grid: text left, image right |
Product showcase |
| With app screenshot |
Centered text + full-width screenshot below |
App launch pages |
| Background image |
Full-bleed bg image + dark overlay + white text |
Visual impact, events |
| With phone mockup |
Text block + device frame image |
Mobile app marketing |
| With image tiles |
Text block + asymmetric image grid |
Portfolio, creative agency |
Hero Text Scaling
Use responsive font sizes for headings. Standard pattern:
<h1 class="text-4xl font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl">
text-balance prevents orphaned words on narrow viewports.- Subtext uses
text-lg sm:text-xl text-gray-600 with max-w-2xl mx-auto for centered variants.
CTA Button Pairs
Primary + secondary pattern:
<div class="flex items-center justify-center gap-x-6">
<a href="#" class="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500">
Get started
</a>
<a href="#" class="text-sm font-semibold text-gray-900">
Learn more <span aria-hidden="true">→</span>
</a>
</div>
Gradient Overlay (Background Image Hero)
<div class="relative isolate overflow-hidden">
<img src="..." alt="" class="absolute inset-0 -z-10 size-full object-cover" />
<div class="absolute inset-0 -z-10 bg-gradient-to-t from-gray-900/80 to-gray-900/20" />
<!-- Content on top -->
</div>
2. Feature Sections
| Layout |
Structure |
When to Use |
| Icon grid |
3-col grid, each cell: icon + title + description |
General feature overview |
| Alternating rows |
Image + text, alternating left/right per row |
Detailed feature walkthrough |
| Bento grid |
Asymmetric card grid with varying col/row spans |
Modern, visual feature display |
| Checklist |
List with check icons + feature text |
Concise feature comparison |
| Screenshot + callouts |
Large screenshot with annotated feature labels |
Product demo sections |
Icon Grid Pattern
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl text-center">
<h2 class="text-base font-semibold text-indigo-600">Section label</h2>
<p class="mt-2 text-4xl font-semibold tracking-tight sm:text-5xl">Section heading</p>
<p class="mt-6 text-lg text-gray-600">Section description.</p>
</div>
<div class="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-none">
<dl class="grid max-w-xl grid-cols-1 gap-x-8 gap-y-16 lg:max-w-none lg:grid-cols-3">
<!-- Repeat: dt with icon + name, dd with description -->
</dl>
</div>
</div>
Section Header Convention
All feature sections follow a consistent header pattern:
| Element |
Classes |
Purpose |
| Eyebrow |
text-base font-semibold text-indigo-600 |
Category label above heading |
| Heading |
mt-2 text-4xl font-semibold tracking-tight sm:text-5xl |
Primary section title |
| Description |
mt-6 text-lg text-gray-600 |
Supporting paragraph |
Bento Grid
Use grid-cols-1 lg:grid-cols-3 with varying lg:col-span-2 and lg:row-span-2 on feature cards. Each card typically has rounded-2xl ring-1 ring-gray-200 overflow-hidden with a screenshot or illustration inside.
3. Pricing Patterns
| Layout |
Columns |
Features |
Best For |
| Two tiers |
2 cards side by side |
Simple comparison |
Freemium products |
| Three tiers |
3 cards, middle emphasized |
Most common pattern |
SaaS with multiple plans |
| With toggle |
Monthly/annual switch above cards |
Billing frequency toggle |
Subscription products |
| Comparison table |
Full feature matrix below cards |
Detailed feature comparison |
Complex product tiers |
| Single price |
One centered card |
Single product/offering |
Simple products |
Emphasized Tier
The recommended tier gets visual prominence:
| Technique |
Classes |
| Scale |
lg:z-10 lg:scale-105 on the card |
| Ring accent |
ring-2 ring-indigo-600 instead of ring-1 ring-gray-200 |
| Shadow |
shadow-xl vs shadow-sm on other cards |
| Popular badge |
Absolute-positioned label: rounded-full bg-indigo-600 px-3 py-1 text-xs font-semibold text-white |
| CTA color |
bg-indigo-600 text-white vs bg-white text-indigo-600 ring-1 ring-indigo-200 |
Feature List Within Pricing Card
<ul role="list" class="mt-8 space-y-3 text-sm text-gray-600">
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600"><!-- check icon --></svg>
Feature description
</li>
</ul>
Monthly/Annual Toggle
Use a button group or Headless UI Switch. Display pricing dynamically. Common pattern:
| State |
Label |
Price Display |
| Monthly |
Monthly (default) |
$15/month |
| Annual |
Annual (highlighted) |
$12/month with Save 20% badge |
4. Social Proof
| Pattern |
Structure |
Key Classes |
| Testimonial card |
Quote + avatar + name + role |
rounded-2xl bg-white p-8 shadow-sm ring-1 ring-gray-200 |
| Testimonial grid |
2-3 col grid of testimonial cards |
grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3 |
| Logo cloud |
Row of grayscale client logos |
grayscale opacity-60 hover:grayscale-0 hover:opacity-100 transition |
| Star rating |
Filled/empty star SVGs |
text-yellow-400 filled, text-gray-200 empty |
| Stats section |
Large numbers + labels in a row |
text-4xl font-semibold number, text-sm text-gray-600 label |
| Case study card |
Image + company + result metric |
Card with image top, text bottom |
Logo Cloud Layout
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<h2 class="text-center text-lg font-semibold text-gray-900">
Trusted by the world's most innovative teams
</h2>
<div class="mx-auto mt-10 grid max-w-lg grid-cols-4 items-center gap-x-8 gap-y-10 sm:max-w-xl sm:grid-cols-6 lg:mx-0 lg:max-w-none lg:grid-cols-5">
<img class="col-span-2 max-h-12 w-full object-contain lg:col-span-1" src="..." alt="..." />
<!-- Repeat per logo -->
</div>
</div>
Stats Section Layout
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<dl class="grid grid-cols-1 gap-x-8 gap-y-16 text-center lg:grid-cols-4">
<div class="mx-auto flex max-w-xs flex-col gap-y-4">
<dt class="text-base text-gray-600">Transactions every 24 hours</dt>
<dd class="order-first text-3xl font-semibold tracking-tight text-gray-900 sm:text-5xl">44 million+</dd>
</div>
<!-- Repeat -->
</dl>
</div>
5. Content Sections
| Section |
Structure |
Responsive Columns |
| Blog card |
Image + date + category + title + excerpt + author |
1 col mobile, 2 col sm, 3 col lg |
| FAQ accordion |
Disclosure component with dt/dd pairs |
Single column, max-w-4xl mx-auto |
| Contact split |
2-col: info left, form right |
Stack on mobile |
| Newsletter inline |
Heading + paragraph + email input + button |
Single row on lg, stacked on mobile |
| Content + sidebar |
Main content + sticky TOC sidebar |
2-col on lg, TOC hidden on mobile |
Blog Card Pattern
<article class="flex flex-col items-start">
<div class="relative w-full">
<img src="..." alt="" class="aspect-video w-full rounded-2xl bg-gray-100 object-cover" />
</div>
<div class="max-w-xl">
<div class="mt-8 flex items-center gap-x-4 text-xs">
<time datetime="2024-01-01" class="text-gray-500">Jan 1, 2024</time>
<span class="rounded-full bg-gray-50 px-3 py-1.5 font-medium text-gray-600">Category</span>
</div>
<h3 class="mt-3 text-lg font-semibold text-gray-900"><a href="#">Post title</a></h3>
<p class="mt-5 line-clamp-3 text-sm text-gray-600">Excerpt text...</p>
</div>
</article>
FAQ Accordion
Use Headless UI Disclosure component. Each item is a dt (question button) and dd (answer panel). Apply divide-y divide-gray-900/10 on the list container.
Newsletter Inline
<div class="flex gap-x-4">
<input type="email" placeholder="Enter your email" class="min-w-0 flex-auto rounded-md bg-white/5 px-3.5 py-2 text-sm ring-1 ring-inset ring-white/10" />
<button type="submit" class="flex-none rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white">
Subscribe
</button>
</div>
6. Headers and Navigation
| Pattern |
Component Dependencies |
Key Behavior |
| Simple header |
None |
Logo + nav links + CTA button |
| Flyout menus |
Headless UI Popover, PopoverButton, PopoverPanel |
Desktop dropdown navigation |
| Mobile menu |
Headless UI Dialog, DialogPanel |
Full-screen slide-over menu |
| Sticky header |
Scroll event listener or sticky top-0 z-50 |
Fixed on scroll |
| Announcement banner |
Dismissible bar above header |
Promo or status message |
Header Structure
<header class="bg-white">
<nav class="mx-auto flex max-w-7xl items-center justify-between p-6 lg:px-8">
<!-- Logo -->
<div class="flex lg:flex-1">
<a href="#"><img class="h-8 w-auto" src="..." alt="" /></a>
</div>
<!-- Mobile menu button -->
<div class="flex lg:hidden">
<button type="button" class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700">
<span class="sr-only">Open main menu</span>
<!-- Bars icon -->
</button>
</div>
<!-- Desktop nav -->
<div class="hidden lg:flex lg:gap-x-12">
<a href="#" class="text-sm font-semibold text-gray-900">Features</a>
<!-- More links -->
</div>
<!-- Desktop CTA -->
<div class="hidden lg:flex lg:flex-1 lg:justify-end">
<a href="#" class="text-sm font-semibold text-gray-900">Log in <span aria-hidden="true">→</span></a>
</div>
</nav>
</header>
Announcement Banner
<div class="relative isolate flex items-center gap-x-6 overflow-hidden bg-gray-50 px-6 py-2.5 sm:px-3.5 sm:before:flex-1">
<p class="text-sm text-gray-900">
<a href="#"><strong class="font-semibold">Announcement</strong> — Details here →</a>
</p>
<div class="flex flex-1 justify-end">
<button type="button" class="-m-3 p-3 focus-visible:outline-offset-[-4px]">
<span class="sr-only">Dismiss</span>
<!-- X icon -->
</button>
</div>
</div>
7. Footers
| Variant |
Structure |
When to Use |
| Simple centered |
Centered nav links + copyright |
Small sites, single-page |
| Multi-column |
4-col grid of categorized link groups |
Sites with many pages |
| With newsletter |
Multi-column + email signup form |
Lead generation focus |
| With social icons |
Links + row of social SVG icons |
Brand with social presence |
| Dark footer |
bg-gray-900 text-gray-300 variant |
Dark-themed or contrast |
Multi-Column Footer Structure
| Column Count |
Grid Classes |
Typical Categories |
| 4 columns |
grid grid-cols-2 gap-8 xl:col-span-2 xl:grid-cols-4 |
Product, Company, Support, Legal |
| 3 columns |
grid grid-cols-2 gap-8 xl:col-span-2 xl:grid-cols-3 |
Solutions, Company, Resources |
Footer Link Styling
<ul role="list" class="mt-6 space-y-4">
<li><a href="#" class="text-sm text-gray-400 hover:text-white">Link text</a></li>
</ul>
Social Icons Row
<div class="flex gap-x-6">
<a href="#" class="text-gray-400 hover:text-gray-300">
<span class="sr-only">Platform name</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24"><!-- icon --></svg>
</a>
</div>
8. Landing Page Composition
Recommended section ordering by page type:
| Page Type |
Recommended Section Order |
| SaaS Landing |
Header > Hero (centered) > Logo cloud > Features (icon grid) > Feature detail (alternating) > Pricing (3-tier) > Testimonials > CTA section > Footer |
| Product Launch |
Header > Hero (with screenshot) > Features (bento) > Screenshots > Pricing (2-tier) > FAQ > Footer |
| Agency / Service |
Header > Hero (split image) > Services (icon grid) > Portfolio > Testimonials > Team section > Contact (split) > Footer |
| Mobile App |
Header > Hero (phone mockup) > Features (alternating) > Stats > Testimonials > Download CTA > Footer |
| Event / Conference |
Header + Banner > Hero (background image) > Speakers (team grid) > Schedule > Pricing (tickets) > FAQ > Footer |
Section Spacing Convention
| Context |
Padding Classes |
| Standard section |
py-24 sm:py-32 |
| Tight section (logo cloud) |
py-16 sm:py-20 |
| Hero section |
py-32 sm:py-48 lg:py-56 |
| CTA section |
py-16 sm:py-24 |
Container Convention
All sections use a consistent container:
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<!-- Section content -->
</div>
9. Visual Design Patterns
Gradient Text
<span class="bg-gradient-to-r from-indigo-500 to-purple-500 bg-clip-text text-transparent">
Gradient heading
</span>
Decorative Background Elements
| Element |
Technique |
Placement |
| Gradient blob |
absolute div with bg-gradient-to-tr, blur-3xl, opacity-30 |
Behind hero or CTA sections |
| Dot pattern |
SVG pattern with fill="currentColor" |
Behind feature sections |
| Grid pattern |
SVG with grid lines at low opacity |
Full-page background |
<!-- Gradient blob -->
<div class="absolute -top-40 -z-10 transform-gpu overflow-hidden blur-3xl" aria-hidden="true">
<div class="aspect-[1155/678] w-[72.1875rem] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30"
style="clip-path: polygon(...)"></div>
</div>
Section Dividers
| Type |
Implementation |
| Angled |
clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%) on the section |
| Wave |
Inline SVG with a curved path between sections |
| Gradient fade |
bg-gradient-to-b from-white to-gray-50 as section background |
Dark Section Variant
For contrast sections (CTA blocks, alternate feature rows):
| Element |
Light |
Dark |
| Background |
bg-white |
bg-gray-900 |
| Heading |
text-gray-900 |
text-white |
| Body text |
text-gray-600 |
text-gray-300 |
| Ring/border |
ring-gray-200 |
ring-white/10 |
| Input bg |
bg-white |
bg-white/5 |
Common Utility Patterns
| Pattern |
Classes |
Purpose |
| Aspect ratio image |
aspect-video w-full rounded-2xl object-cover |
Blog cards, hero images |
| Avatar |
size-10 rounded-full |
Testimonials, team |
| Badge |
rounded-full bg-indigo-600/10 px-3 py-1 text-xs font-semibold text-indigo-600 ring-1 ring-inset ring-indigo-600/20 |
Tags, categories |
| Truncated text |
line-clamp-3 |
Blog excerpts |
| Screen-reader text |
sr-only |
Icon-only buttons, social links |
| Smooth transition |
transition-all duration-300 |
Hover states |
| Focus ring |
focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 |
Interactive elements |
MCP Component Library
The frontend-components MCP server provides marketing-related components:
- HyperUI (
hyperui, category: marketing): Heroes/banners, CTAs, pricing tables, testimonials, FAQs, blog cards, product showcases, announcements, footers, headers, stats
- DaisyUI (
daisyui): Hero, card, stat, badge, countdown, timeline class references
- FlyonUI (
flyonui): Card, stat, footer CSS components
Marketing search: list_components(framework: "hyperui", category: "marketing") to browse all marketing components, or search_components(query: "hero") across libraries.