TwTailwind CSS · Lesson 7 of 8

Mini Project: Landing Page

Let's build a complete landing page hero section using Tailwind. Navigation, headline, subtext, CTAs, and a responsive layout.

HTML

<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>My Product</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-white text-gray-900 antialiased">

  <!-- Navigation -->
  <header class="fixed top-0 left-0 right-0 z-50 bg-white/80 backdrop-blur border-b border-gray-100">
    <nav class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex items-center justify-between h-16">
        <a href="/" class="font-bold text-xl text-gray-900">Acme Co.</a>
        <div class="hidden md:flex items-center gap-8">
          <a href="#features" class="text-sm text-gray-600 hover:text-gray-900 transition-colors">Features</a>
          <a href="#pricing"  class="text-sm text-gray-600 hover:text-gray-900 transition-colors">Pricing</a>
          <a href="#about"    class="text-sm text-gray-600 hover:text-gray-900 transition-colors">About</a>
          <a href="/login"    class="text-sm font-medium text-gray-900">Log in</a>
          <a href="/signup"   class="px-4 py-2 bg-gray-900 text-white text-sm font-medium rounded-lg hover:bg-gray-700 transition-colors">
            Get started
          </a>
        </div>
      </div>
    </nav>
  </header>

  <!-- Hero -->
  <main class="pt-16">
    <section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-20 pb-24 text-center">
      <!-- Badge -->
      <div class="inline-flex items-center gap-2 px-3 py-1 bg-blue-50 text-blue-700 rounded-full text-sm font-medium mb-8">
        <span class="w-1.5 h-1.5 bg-blue-500 rounded-full"></span>
        Now in public beta
      </div>

      <!-- Headline -->
      <h1 class="text-4xl sm:text-6xl lg:text-7xl font-black tracking-tight text-gray-900 max-w-4xl mx-auto leading-tight">
        Build faster with
        <span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-purple-600">
          less code
        </span>
      </h1>

      <!-- Subtext -->
      <p class="mt-6 text-lg sm:text-xl text-gray-500 max-w-2xl mx-auto leading-relaxed">
        The modern platform for building web apps. Deploy in seconds,
        scale automatically, and never think about servers again.
      </p>

      <!-- CTAs -->
      <div class="mt-10 flex flex-col sm:flex-row items-center justify-center gap-4">
        <a href="/signup" class="w-full sm:w-auto px-8 py-3.5 bg-gray-900 hover:bg-gray-700 text-white font-semibold rounded-xl transition-colors shadow-sm">
          Start for free →
        </a>
        <a href="/demo" class="w-full sm:w-auto px-8 py-3.5 bg-white hover:bg-gray-50 text-gray-900 font-semibold rounded-xl border border-gray-200 transition-colors">
          Watch demo
        </a>
      </div>

      <!-- Social proof -->
      <p class="mt-8 text-sm text-gray-400">
        Trusted by <span class="font-semibold text-gray-600">10,000+</span> developers worldwide
      </p>
    </section>
  </main>

</body>
</html>

◆ Note
This uses the CDN version (no build step) — great for prototyping. For production, install Tailwind via npm and use the build process to tree-shake unused classes. The CDN includes all 3MB of Tailwind; your built CSS will be 5-15 KB.