Part 38: Responsive Landing Page with Mobile Navigation Drawer

Let's build a complete responsive marketing hero section with an adaptive mobile navigation bar.

Complete Landing Page Code

<header class="bg-slate-900 text-white min-h-screen flex flex-col justify-between">
  <!-- Navbar -->
  <nav class="max-w-7xl mx-auto w-full px-6 py-6 flex justify-between items-center">
    <span class="text-2xl font-black tracking-tight text-blue-400">DEVIFY</span>

    <!-- Desktop Nav -->
    <div class="hidden md:flex items-center gap-8 text-sm font-semibold text-slate-300">
      <a href="#" class="hover:text-white">Product</a>
      <a href="#" class="hover:text-white">Solutions</a>
      <a href="#" class="hover:text-white">Pricing</a>
      <a href="#" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-500">Get Started</a>
    </div>

    <!-- Mobile Menu Button -->
    <button class="md:hidden p-2 text-slate-300 hover:text-white">
      <svg class="size-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
      </svg>
    </button>
  </nav>

  <!-- Hero Content -->
  <main class="max-w-4xl mx-auto px-6 py-16 text-center flex flex-col items-center">
    <span class="px-3.5 py-1.5 bg-blue-500/10 text-blue-400 border border-blue-500/20 text-xs font-bold rounded-full mb-6 uppercase tracking-wider">
      Tailwind CSS 4.0 Ready
    </span>
    <h1 class="text-4xl sm:text-6xl font-extrabold tracking-tight leading-tight">
      Build modern interfaces <span class="bg-gradient-to-r from-blue-400 to-emerald-400 bg-clip-text text-transparent">without leaving your HTML</span>.
    </h1>
    <p class="mt-6 text-lg sm:text-xl text-slate-400 max-w-2xl">
      The most popular utility-first CSS framework for rapid UI development. Scalable, lightweight, and maintainable.
    </p>
    <div class="mt-8 flex flex-col sm:flex-row gap-4">
      <button class="px-8 py-3.5 bg-blue-600 hover:bg-blue-500 text-white font-bold rounded-xl shadow-lg shadow-blue-500/30 transition">
        Start Free Trial
      </button>
      <button class="px-8 py-3.5 bg-slate-800 hover:bg-slate-700 text-slate-300 font-bold rounded-xl transition">
        Live Documentation
      </button>
    </div>
  </main>

  <footer class="py-6 text-center text-xs text-slate-600 border-t border-slate-800">
    © 2026 Devify Technologies Inc. All rights reserved.
  </footer>
</header>

Key Takeaways

• Use gradient text with dark themes for high visual impact.
• Responsive utility combinations (sm:flex-row, sm:text-6xl) ensure flawless presentation across all devices.

In Part 39, we enter Module 7 to master Pseudo-Classes and Interactive State Modifiers!