Tailwind CSS

Building a Complete Landing Page

30 min Lesson 34 of 35

Building a Complete Landing Page

In this comprehensive lesson, we'll build a complete, production-ready landing page from scratch using Tailwind CSS. This real-world project integrates all the concepts we've covered: responsive design, components, accessibility, and modern CSS features.

What We'll Build

A modern SaaS landing page featuring:

  • Responsive navigation with mobile menu
  • Hero section with call-to-action
  • Features grid with icons
  • Social proof testimonials
  • Pricing table comparison
  • Final CTA section
  • Footer with multiple columns
  • Dark mode support
  • Full accessibility

Project Setup

HTML Boilerplate

<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Transform your workflow with our powerful SaaS platform">
  <title>ProductFlow - Workflow Management Made Easy</title>

  <!-- Tailwind CSS CDN (use build process in production) -->
  <script src="https://cdn.tailwindcss.com"></script>

  <!-- Configure Tailwind -->
  <script>
    tailwind.config = {
      darkMode: 'class',
      theme: {
        extend: {
          colors: {
            brand: {
              50: '#eff6ff',
              500: '#3b82f6',
              600: '#2563eb',
              700: '#1d4ed8',
            }
          }
        }
      }
    }
  </script>

  <!-- Custom styles -->
  <style>
    @layer utilities {
      .text-balance {
        text-wrap: balance;
      }
    }
  </style>
</head>
<body class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
  <!-- Page content goes here -->
</body>
</html>

Navigation Header

A sticky navigation bar with logo, menu items, and CTA button that works on all screen sizes.

Responsive Navigation

<nav class="
  fixed top-0 left-0 right-0 z-50
  bg-white/80 dark:bg-gray-900/80
  backdrop-blur-md
  border-b border-gray-200 dark:border-gray-800
">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex items-center justify-between h-16">
      <!-- Logo -->
      <div class="flex-shrink-0">
        <a href="#" class="flex items-center gap-2">
          <div class="w-8 h-8 bg-gradient-to-br from-brand-500 to-brand-700 rounded-lg"></div>
          <span class="text-xl font-bold">ProductFlow</span>
        </a>
      </div>

      <!-- Desktop Navigation -->
      <div class="hidden md:flex items-center gap-8">
        <a href="#features" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors">
          Features
        </a>
        <a href="#pricing" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors">
          Pricing
        </a>
        <a href="#testimonials" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors">
          Testimonials
        </a>
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors">
          About
        </a>
      </div>

      <!-- CTA Buttons -->
      <div class="hidden md:flex items-center gap-4">
        <button
          onclick="document.documentElement.classList.toggle('dark')"
          class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
          aria-label="Toggle dark mode"
        >
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/>
          </svg>
        </button>
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors">
          Sign In
        </a>
        <a href="#" class="
          px-4 py-2
          bg-brand-600 text-white
          rounded-lg font-medium
          hover:bg-brand-700
          transition-colors
        ">
          Get Started
        </a>
      </div>

      <!-- Mobile Menu Button -->
      <button
        onclick="document.getElementById('mobile-menu').classList.toggle('hidden')"
        class="md:hidden p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800"
        aria-label="Toggle menu"
      >
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
        </svg>
      </button>
    </div>
  </div>

  <!-- Mobile Menu -->
  <div id="mobile-menu" class="hidden md:hidden border-t border-gray-200 dark:border-gray-800">
    <div class="px-4 py-4 space-y-3">
      <a href="#features" class="block px-3 py-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800">Features</a>
      <a href="#pricing" class="block px-3 py-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800">Pricing</a>
      <a href="#testimonials" class="block px-3 py-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800">Testimonials</a>
      <a href="#" class="block px-3 py-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800">About</a>
      <div class="pt-3 border-t border-gray-200 dark:border-gray-800 space-y-2">
        <a href="#" class="block px-3 py-2 text-center rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800">Sign In</a>
        <a href="#" class="block px-3 py-2 text-center bg-brand-600 text-white rounded-lg hover:bg-brand-700">Get Started</a>
      </div>
    </div>
  </div>
</nav>

Hero Section

An eye-catching hero section with headline, description, CTA buttons, and visual element.

Hero with Gradient Background

<section class="
  relative
  pt-24 pb-16
  sm:pt-32 sm:pb-24
  lg:pt-40 lg:pb-32
  overflow-hidden
">
  <!-- Background gradients -->
  <div class="absolute inset-0 bg-gradient-to-br from-brand-50 to-blue-50 dark:from-gray-900 dark:to-gray-800"></div>
  <div class="absolute top-0 right-0 -translate-y-1/2 translate-x-1/2 w-96 h-96 bg-brand-500/20 rounded-full blur-3xl"></div>
  <div class="absolute bottom-0 left-0 translate-y-1/2 -translate-x-1/2 w-96 h-96 bg-purple-500/20 rounded-full blur-3xl"></div>

  <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center max-w-4xl mx-auto">
      <!-- Badge -->
      <div class="inline-flex items-center gap-2 px-4 py-2 bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-full mb-6">
        <span class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></span>
        <span class="text-sm font-medium">Now with AI-powered insights</span>
      </div>

      <!-- Headline -->
      <h1 class="
        text-4xl sm:text-5xl lg:text-6xl
        font-bold
        text-balance
        mb-6
        bg-gradient-to-r from-gray-900 to-gray-700
        dark:from-white dark:to-gray-300
        bg-clip-text text-transparent
      ">
        Transform Your Workflow with Intelligent Automation
      </h1>

      <!-- Description -->
      <p class="
        text-lg sm:text-xl
        text-gray-600 dark:text-gray-300
        text-balance
        mb-8
        max-w-2xl mx-auto
      ">
        Streamline your team's productivity with our all-in-one platform. Save time, reduce errors, and scale effortlessly.
      </p>

      <!-- CTA Buttons -->
      <div class="flex flex-col sm:flex-row gap-4 justify-center mb-12">
        <a href="#" class="
          inline-flex items-center justify-center gap-2
          px-8 py-4
          bg-brand-600 text-white
          rounded-lg font-semibold
          hover:bg-brand-700
          shadow-lg shadow-brand-600/30
          transition-all
          hover:shadow-xl hover:shadow-brand-600/40
          hover:-translate-y-0.5
        ">
          Start Free Trial
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
          </svg>
        </a>
        <a href="#" class="
          inline-flex items-center justify-center gap-2
          px-8 py-4
          bg-white dark:bg-gray-800
          text-gray-900 dark:text-white
          rounded-lg font-semibold
          border-2 border-gray-200 dark:border-gray-700
          hover:border-gray-300 dark:hover:border-gray-600
          transition-all
        ">
          Watch Demo
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"/>
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
          </svg>
        </a>
      </div>

      <!-- Social Proof -->
      <div class="flex flex-wrap items-center justify-center gap-8 text-sm text-gray-500 dark:text-gray-400">
        <div class="flex items-center gap-2">
          <div class="flex -space-x-2">
            <div class="w-8 h-8 rounded-full bg-gradient-to-br from-blue-400 to-blue-600 border-2 border-white dark:border-gray-900"></div>
            <div class="w-8 h-8 rounded-full bg-gradient-to-br from-purple-400 to-purple-600 border-2 border-white dark:border-gray-900"></div>
            <div class="w-8 h-8 rounded-full bg-gradient-to-br from-pink-400 to-pink-600 border-2 border-white dark:border-gray-900"></div>
          </div>
          <span>10,000+ teams</span>
        </div>
        <div class="flex items-center gap-1">
          <span>⭐⭐⭐⭐⭐</span>
          <span>4.9/5 rating</span>
        </div>
        <span>No credit card required</span>
      </div>
    </div>
  </div>
</section>

Features Grid

A responsive grid showcasing key features with icons and descriptions.

Features Section

<section id="features" class="py-16 sm:py-24 bg-white dark:bg-gray-900">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <!-- Section Header -->
    <div class="text-center max-w-3xl mx-auto mb-16">
      <h2 class="text-3xl sm:text-4xl font-bold mb-4">
        Everything you need to succeed
      </h2>
      <p class="text-lg text-gray-600 dark:text-gray-300">
        Powerful features designed to help your team collaborate better and achieve more.
      </p>
    </div>

    <!-- Features Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      <!-- Feature Card 1 -->
      <div class="
        p-6
        bg-gray-50 dark:bg-gray-800
        rounded-xl
        hover:shadow-lg
        transition-shadow
      ">
        <div class="w-12 h-12 bg-brand-100 dark:bg-brand-900/30 rounded-lg flex items-center justify-center mb-4">
          <svg class="w-6 h-6 text-brand-600 dark:text-brand-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
          </svg>
        </div>
        <h3 class="text-xl font-semibold mb-2">Lightning Fast</h3>
        <p class="text-gray-600 dark:text-gray-300">
          Experience blazing-fast performance with our optimized infrastructure.
        </p>
      </div>

      <!-- Feature Card 2 -->
      <div class="p-6 bg-gray-50 dark:bg-gray-800 rounded-xl hover:shadow-lg transition-shadow">
        <div class="w-12 h-12 bg-green-100 dark:bg-green-900/30 rounded-lg flex items-center justify-center mb-4">
          <svg class="w-6 h-6 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
          </svg>
        </div>
        <h3 class="text-xl font-semibold mb-2">Secure by Default</h3>
        <p class="text-gray-600 dark:text-gray-300">
          Enterprise-grade security with end-to-end encryption and compliance.
        </p>
      </div>

      <!-- Feature Card 3 -->
      <div class="p-6 bg-gray-50 dark:bg-gray-800 rounded-xl hover:shadow-lg transition-shadow">
        <div class="w-12 h-12 bg-purple-100 dark:bg-purple-900/30 rounded-lg flex items-center justify-center mb-4">
          <svg class="w-6 h-6 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
          </svg>
        </div>
        <h3 class="text-xl font-semibold mb-2">Team Collaboration</h3>
        <p class="text-gray-600 dark:text-gray-300">
          Work together seamlessly with real-time collaboration tools.
        </p>
      </div>

      <!-- Feature Cards 4-6 (similar structure) -->
      <div class="p-6 bg-gray-50 dark:bg-gray-800 rounded-xl hover:shadow-lg transition-shadow">
        <div class="w-12 h-12 bg-orange-100 dark:bg-orange-900/30 rounded-lg flex items-center justify-center mb-4">
          <svg class="w-6 h-6 text-orange-600 dark:text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
          </svg>
        </div>
        <h3 class="text-xl font-semibold mb-2">Advanced Analytics</h3>
        <p class="text-gray-600 dark:text-gray-300">
          Get insights with comprehensive analytics and reporting.
        </p>
      </div>

      <div class="p-6 bg-gray-50 dark:bg-gray-800 rounded-xl hover:shadow-lg transition-shadow">
        <div class="w-12 h-12 bg-pink-100 dark:bg-pink-900/30 rounded-lg flex items-center justify-center mb-4">
          <svg class="w-6 h-6 text-pink-600 dark:text-pink-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"/>
          </svg>
        </div>
        <h3 class="text-xl font-semibold mb-2">Customizable</h3>
        <p class="text-gray-600 dark:text-gray-300">
          Tailor every aspect to match your workflow and preferences.
        </p>
      </div>

      <div class="p-6 bg-gray-50 dark:bg-gray-800 rounded-xl hover:shadow-lg transition-shadow">
        <div class="w-12 h-12 bg-cyan-100 dark:bg-cyan-900/30 rounded-lg flex items-center justify-center mb-4">
          <svg class="w-6 h-6 text-cyan-600 dark:text-cyan-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z"/>
          </svg>
        </div>
        <h3 class="text-xl font-semibold mb-2">Cloud-Native</h3>
        <p class="text-gray-600 dark:text-gray-300">
          Access your data anywhere with automatic sync and backups.
        </p>
      </div>
    </div>
  </div>
</section>

Design Principles Applied

  • Consistent spacing: Using p-6 for card padding throughout
  • Visual hierarchy: Icon → heading → description
  • Color coding: Different icon background colors for visual interest
  • Interactive states: Hover effects for better UX
  • Responsive grid: 1 column mobile, 2 tablet, 3 desktop

Testimonials Section

Social Proof Testimonials

<section id="testimonials" class="py-16 sm:py-24 bg-gray-50 dark:bg-gray-800">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center max-w-3xl mx-auto mb-16">
      <h2 class="text-3xl sm:text-4xl font-bold mb-4">
        Loved by teams worldwide
      </h2>
      <p class="text-lg text-gray-600 dark:text-gray-300">
        See what our customers have to say about their experience.
      </p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      <!-- Testimonial 1 -->
      <div class="bg-white dark:bg-gray-900 p-6 rounded-xl">
        <div class="flex items-center gap-1 text-yellow-400 mb-4">
          <span>⭐⭐⭐⭐⭐</span>
        </div>
        <p class="text-gray-600 dark:text-gray-300 mb-6">
          "ProductFlow transformed how our team works. We've increased productivity by 40% in just three months!"
        </p>
        <div class="flex items-center gap-3">
          <div class="w-12 h-12 rounded-full bg-gradient-to-br from-blue-400 to-blue-600"></div>
          <div>
            <div class="font-semibold">Sarah Chen</div>
            <div class="text-sm text-gray-500 dark:text-gray-400">CEO, TechStart</div>
          </div>
        </div>
      </div>

      <!-- Testimonials 2-3 (similar structure) -->
      <div class="bg-white dark:bg-gray-900 p-6 rounded-xl">
        <div class="flex items-center gap-1 text-yellow-400 mb-4">
          <span>⭐⭐⭐⭐⭐</span>
        </div>
        <p class="text-gray-600 dark:text-gray-300 mb-6">
          "The best investment we've made. Simple, powerful, and incredibly reliable."
        </p>
        <div class="flex items-center gap-3">
          <div class="w-12 h-12 rounded-full bg-gradient-to-br from-purple-400 to-purple-600"></div>
          <div>
            <div class="font-semibold">Marcus Johnson</div>
            <div class="text-sm text-gray-500 dark:text-gray-400">CTO, DataCorp</div>
          </div>
        </div>
      </div>

      <div class="bg-white dark:bg-gray-900 p-6 rounded-xl">
        <div class="flex items-center gap-1 text-yellow-400 mb-4">
          <span>⭐⭐⭐⭐⭐</span>
        </div>
        <p class="text-gray-600 dark:text-gray-300 mb-6">
          "Outstanding support and features. Couldn't imagine working without it now."
        </p>
        <div class="flex items-center gap-3">
          <div class="w-12 h-12 rounded-full bg-gradient-to-br from-pink-400 to-pink-600"></div>
          <div>
            <div class="font-semibold">Emily Rodriguez</div>
            <div class="text-sm text-gray-500 dark:text-gray-400">PM, DesignHub</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Pricing Table

Responsive Pricing Cards

<section id="pricing" class="py-16 sm:py-24 bg-white dark:bg-gray-900">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center max-w-3xl mx-auto mb-16">
      <h2 class="text-3xl sm:text-4xl font-bold mb-4">
        Simple, transparent pricing
      </h2>
      <p class="text-lg text-gray-600 dark:text-gray-300">
        Choose the plan that's right for your team. No hidden fees.
      </p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto">
      <!-- Starter Plan -->
      <div class="p-8 bg-gray-50 dark:bg-gray-800 rounded-2xl">
        <h3 class="text-xl font-semibold mb-2">Starter</h3>
        <div class="mb-6">
          <span class="text-4xl font-bold">$29</span>
          <span class="text-gray-500 dark:text-gray-400">/month</span>
        </div>
        <ul class="space-y-3 mb-8">
          <li class="flex items-center gap-2">
            <svg class="w-5 h-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
            </svg>
            Up to 10 team members
          </li>
          <li class="flex items-center gap-2">
            <svg class="w-5 h-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
            </svg>
            5GB storage
          </li>
          <li class="flex items-center gap-2">
            <svg class="w-5 h-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
            </svg>
            Email support
          </li>
        </ul>
        <button class="w-full px-4 py-3 bg-gray-200 dark:bg-gray-700 rounded-lg font-medium hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors">
          Get Started
        </button>
      </div>

      <!-- Pro Plan (Featured) -->
      <div class="p-8 bg-brand-600 text-white rounded-2xl relative transform md:scale-105 shadow-xl">
        <div class="absolute top-0 right-8 -translate-y-1/2 px-3 py-1 bg-yellow-400 text-yellow-900 text-sm font-semibold rounded-full">
          Popular
        </div>
        <h3 class="text-xl font-semibold mb-2">Professional</h3>
        <div class="mb-6">
          <span class="text-4xl font-bold">$99</span>
          <span class="text-brand-200">/month</span>
        </div>
        <ul class="space-y-3 mb-8">
          <li class="flex items-center gap-2">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
            </svg>
            Unlimited team members
          </li>
          <li class="flex items-center gap-2">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
            </svg>
            100GB storage
          </li>
          <li class="flex items-center gap-2">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
            </svg>
            Priority support
          </li>
          <li class="flex items-center gap-2">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
            </svg>
            Advanced analytics
          </li>
        </ul>
        <button class="w-full px-4 py-3 bg-white text-brand-600 rounded-lg font-medium hover:bg-gray-100 transition-colors">
          Get Started
        </button>
      </div>

      <!-- Enterprise Plan -->
      <div class="p-8 bg-gray-50 dark:bg-gray-800 rounded-2xl">
        <h3 class="text-xl font-semibold mb-2">Enterprise</h3>
        <div class="mb-6">
          <span class="text-4xl font-bold">Custom</span>
        </div>
        <ul class="space-y-3 mb-8">
          <li class="flex items-center gap-2">
            <svg class="w-5 h-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
            </svg>
            Everything in Pro
          </li>
          <li class="flex items-center gap-2">
            <svg class="w-5 h-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
            </svg>
            Unlimited storage
          </li>
          <li class="flex items-center gap-2">
            <svg class="w-5 h-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
            </svg>
            Dedicated support
          </li>
          <li class="flex items-center gap-2">
            <svg class="w-5 h-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
            </svg>
            Custom integrations
          </li>
        </ul>
        <button class="w-full px-4 py-3 bg-gray-200 dark:bg-gray-700 rounded-lg font-medium hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors">
          Contact Sales
        </button>
      </div>
    </div>
  </div>
</section>

Practice Exercise 1: Add CTA Section

Create a final call-to-action section with:

  • Gradient background
  • Compelling headline and subtext
  • Email input field with submit button
  • Trust indicators (security badge, no credit card required)

Practice Exercise 2: Build Footer

Design a comprehensive footer including:

  • Logo and company description
  • 4-column link grid (Product, Company, Resources, Legal)
  • Social media icons
  • Newsletter signup form
  • Copyright and legal links

Practice Exercise 3: Enhance Responsiveness

Test the landing page on all breakpoints and add:

  • Mobile-optimized spacing
  • Touch-friendly button sizes
  • Improved mobile navigation
  • Performance optimizations (lazy loading images)

Summary

In this lesson, we built a complete, production-ready landing page with Tailwind CSS featuring:

  • Sticky navigation: Responsive header with mobile menu and dark mode toggle
  • Hero section: Eye-catching design with gradients, CTAs, and social proof
  • Features grid: Responsive layout showcasing key benefits with icons
  • Testimonials: Social proof with customer reviews and ratings
  • Pricing table: Clear comparison with featured plan highlight
  • Responsive design: Works seamlessly from mobile to desktop
  • Dark mode: Complete theme support throughout
  • Performance: Optimized with Tailwind's utility-first approach

In the final lesson, we'll compare Tailwind CSS with other approaches and discuss your next steps in mastering Tailwind.

Previous Lesson Tailwind CSS v4 & Modern Features
Next Lesson Tailwind vs Other Approaches & Next Steps
Back to Course