Tailwind CSS Marketing Pages

1. Hero Section Patterns

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

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:

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

Emphasized Tier

The recommended tier gets visual prominence:

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:

4. Social Proof

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

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

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

Multi-Column Footer Structure

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:

Section Spacing Convention

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

<!-- 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

Dark Section Variant

For contrast sections (CTA blocks, alternate feature rows):

Common Utility Patterns

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.