Tailwind CSS Academy · Lesson

Hero and Navigation Section

Build the page header with a sticky navbar and a hero section featuring a headline, subtext, CTA buttons, and a decorative background gradient.

Planning the Landing Page Layout

A marketing landing page typically follows a predictable structure: sticky navbar at the top, a hero section with a headline and CTA, followed by features, testimonials, pricing, and a footer. Starting with the navbar and hero lets you establish the page's visual tone and establishes the vertical rhythm for everything that follows.

<!-- Page structure overview -->
<body class="bg-white text-gray-900">
  <header><!-- Sticky navbar --></header>
  <main>
    <section><!-- Hero --></section>
    <section><!-- Features --></section>
    <section><!-- Testimonials --></section>
    <section><!-- Pricing --></section>
  </main>
  <footer><!-- Footer --></footer>
</body>

Building the Sticky Navbar Shell

Use sticky top-0 z-50 to keep the navbar visible as users scroll. Add bg-white/90 backdrop-blur-sm for a modern frosted glass appearance. The border-b border-gray-200 creates a subtle separator from the page content. Wrap everything in a max-w-7xl mx-auto px-4 container to constrain the nav width on large screens.

<header class="sticky top-0 z-50 border-b border-gray-200 bg-white/90 backdrop-blur-sm">
  <nav class="mx-auto flex max-w-7xl items-center justify-between px-4 py-4">
    <!-- Logo -->
    <!-- Nav links -->
    <!-- CTA button -->
  </nav>
</header>

All lessons in this course

← Back to Tailwind CSS Academy