Saatnya menggabungkan semua yang kamu pelajari untuk membangun landing page nyata. Landing page adalah halaman pertama yang dilihat pengunjung — kalau berantakan, mereka akan pergi dalam 3 detik. Tailwind membuat proses ini cepat karena kamu tidak perlu mikir nama class atau pindah-pindah file CSS.

Anatomi landing page yang baik:

1. Hero section — judul besar, tagline singkat, 1-2 CTA button yang jelas
2. Features section — 3-4 kolom yang menjelaskan value proposition
3. Social proof (opsional) — testimoni, logo client, statistik
4. CTA akhir — ajakan terakhir sebelum footer
5. Footer — kontak, links, copyright

1. Hero section (mobile-first)

Hero harus loud dan jelas. Judul besar, tagline pendek, satu CTA utama.

<section class="bg-gradient-to-b from-blue-50 to-white px-6 py-16 md:py-24">
  <div class="mx-auto max-w-4xl text-center">
    <h1 class="text-4xl font-bold text-gray-900 md:text-6xl">
      Belajar Web Development Jadi Mudah
    </h1>
    <p class="mt-6 text-lg text-gray-600 md:text-xl">
      Platform interaktif untuk kuasai HTML, CSS, dan JavaScript.
    </p>
    <div class="mt-8 flex flex-col items-center gap-3 sm:flex-row sm:justify-center">
      <button class="rounded-lg bg-blue-600 px-8 py-3 font-semibold text-white shadow-lg hover:bg-blue-700">
        Mulai Gratis
      </button>
      <button class="rounded-lg border border-gray-300 bg-white px-8 py-3 font-semibold text-gray-700 hover:bg-gray-50">
        Lihat Demo
      </button>
    </div>
  </div>
</section>

2. Features section dengan responsive grid

Pola paling umum: 1 kolom di mobile, 3 kolom di desktop. Gunakan grid-cols-1 md:grid-cols-3.

<section class="px-6 py-16">
  <div class="mx-auto max-w-6xl">
    <h2 class="text-center text-3xl font-bold">Kenapa Pilih Kami?</h2>
    <div class="mt-12 grid grid-cols-1 gap-8 md:grid-cols-3">
      <div class="rounded-xl border border-gray-200 bg-white p-6 shadow-sm">
        <div class="mb-4 text-4xl">🚀</div>
        <h3 class="font-bold">Cepat</h3>
        <p class="mt-2 text-gray-600">Learning path yang terstruktur.</p>
      </div>
      <!-- 2 card lagi dengan struktur sama -->
    </div>
  </div>
</section>

Kunci responsiveness: mobile default grid-cols-1, lalu breakpoint md:grid-cols-3. gap-8 kasih jarak antar card.

3. Footer minimal

<footer class="border-t border-gray-200 bg-gray-50 px-6 py-10">
  <div class="mx-auto flex max-w-6xl flex-col items-center justify-between gap-4 md:flex-row">
    <p class="text-sm text-gray-500">© 2026 BelajarWeb.dev</p>
    <div class="flex gap-6 text-sm text-gray-600">
      <a href="#" class="hover:text-gray-900">Privacy</a>
      <a href="#" class="hover:text-gray-900">Terms</a>
      <a href="#" class="hover:text-gray-900">Contact</a>
    </div>
  </div>
</footer>

Strategi mobile-first

Selalu mulai dari layout mobile (tanpa prefix), baru tambahkan md: / lg: untuk layar besar. Ini lebih mudah karena mobile punya constraint paling ketat — kalau bagus di mobile, desktop biasanya tinggal longgarin.

Checklist landing page:

• Font size hero text-4xl di mobile, text-6xl di desktop
• CTA button minimal px-8 py-3 biar gampang ditap di HP
• Max-width container (max-w-4xl untuk hero, max-w-6xl untuk features)
• Padding horizontal px-6 di section — jangan lupa padding vertikal
• Gunakan shadow-sm atau shadow-lg untuk depth yang halus
• Warna harus konsisten — pilih 1 primary (blue-600) + 1 neutral (gray)

Tips: Kalau bingung harus mulai dari mana, copy-paste contoh hero di atas dulu, jalanin di browser, baru modifikasi warna dan teksnya. Iterate bukan optimize.