Building a Complete Landing Page with Tailwind

You have learned utilities, layout, responsiveness, states, dark mode, and theming. Now we put everything together and build a full landing page: sticky navbar, hero section, feature grid, call-to-action band, and footer. This capstone lesson walks through each section and explains why each class is there, so you finish with a template you can adapt for any product.

Page Architecture

A landing page is a vertical stack of full-width sections, each with an inner centered container:

html

<section class="w-full bg-white">
  <div class="mx-auto max-w-6xl px-4 py-16">
    <!-- section content -->
  </div>
</section>

The outer element carries the background color edge to edge; the inner mx-auto max-w-6xl px-4 container keeps content aligned to one consistent column. Repeat this shell for every section and the page instantly looks professional.

The Navbar

html

<header class="sticky top-0 z-50 border-b bg-white/80 backdrop-blur">
  <nav class="mx-auto flex max-w-6xl items-center justify-between px-4 py-3">
    <span class="text-lg font-bold text-indigo-600">CraftKit</span>
    <div class="hidden gap-6 md:flex">
      <a href="#features" class="text-gray-600 hover:text-gray-900">Features</a>
      <a href="#pricing" class="text-gray-600 hover:text-gray-900">Pricing</a>
    </div>
    <a href="#" class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-semibold text-white hover:bg-indigo-700">Sign up</a>
  </nav>
</header>

Three techniques worth noting: sticky top-0 z-50 keeps the bar pinned above content, bg-white/80 backdrop-blur creates the frosted-glass effect, and hidden md:flex collapses the links on phones.

The Hero

The hero sells the product in one glance: a big headline, a subline, and two buttons.

html

<section class="bg-gradient-to-b from-indigo-50 to-white">
  <div class="mx-auto max-w-6xl px-4 py-24 text-center">
    <h1 class="text-4xl font-extrabold tracking-tight text-gray-900 md:text-6xl">
      Build interfaces <span class="text-indigo-600">faster</span>
    </h1>
    <p class="mx-auto mt-6 max-w-2xl text-lg leading-relaxed text-gray-600">
      Everything you need to ship polished pages without writing a single line of custom CSS.
    </p>
    <div class="mt-8 flex flex-col justify-center gap-4 sm:flex-row">
      <a href="#" class="rounded-lg bg-indigo-600 px-8 py-3 font-semibold text-white hover:bg-indigo-700">Get started free</a>
      <a href="#" class="rounded-lg border border-gray-300 px-8 py-3 font-semibold text-gray-700 hover:bg-gray-50">Live demo</a>
    </div>
  </div>
</section>

Responsive type (text-4xl md:text-6xl) and stacking buttons (flex-col sm:flex-row) keep the hero perfect on every screen.

The Feature Grid

The classic one-two-three column pattern with hover lift:

html

<div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
  <div class="group rounded-xl border p-6 transition hover:shadow-lg">
    <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-indigo-100 text-indigo-600">1</div>
    <h3 class="mt-4 font-semibold group-hover:text-indigo-600">Utility-first</h3>
    <p class="mt-2 text-sm text-gray-600">Compose any design from small classes.</p>
  </div>
  <!-- repeat cards -->
</div>

Call to Action and Footer

A high-contrast band before the footer converts scrollers into signups:

html

<section class="bg-indigo-600">
  <div class="mx-auto max-w-6xl px-4 py-16 text-center">
    <h2 class="text-3xl font-bold text-white">Ready to start building?</h2>
    <a href="#" class="mt-6 inline-block rounded-lg bg-white px-8 py-3 font-semibold text-indigo-600 hover:bg-indigo-50">Create your account</a>
  </div>
</section>

The footer reuses the container shell with bg-gray-900, muted text-gray-400 links, and a flex flex-col md:flex-row justify-between layout.

A Polish Checklist

Consistent vertical rhythm: every section uses py-16 or py-24.
One accent color family (indigo here) plus grays — restraint reads as professional.
All interactive elements have hover: states and visible focus styles.
Test at 320px, 768px, and 1280px before shipping.

Key Takeaways

Structure pages as full-width sections with a repeated mx-auto max-w-6xl px-4 inner container.
sticky top-0 plus backdrop-blur builds a modern frosted navbar.
Hero, feature grid, CTA, footer — four sections cover most landing pages.
Consistent spacing, one accent color, and hover states are what make it feel designed.

Congratulations — you have completed the Tailwind CSS course! The full page is in the sample code below. As a next step, rebuild it from memory, swap the palette to your own brand, and deploy it.