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">&rarr;</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">&rarr;</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 &rarr;</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.