Tailwind CSS & Modern UI Design

Tailwind CSS adalah framework CSS berpendekatan *Utility-First* yang menyediakan class-class atomik rendah seperti flex, pt-4, text-center, dan rotate-90 untuk membangun antarmuka pengguna tanpa menulis CSS kustom.

Mengapa Utility-First?

1. Tidak Memikirkan Nama Class Custom — Anda tidak perlu berdebat menamai class seperti .sidebar-inner-wrapper-v2.

2. File CSS Output Sangat Kecil — Tailwind menghapus class yang tidak digunakan (*Purging/JIT*) sehingga CSS produksi umumnya kurang dari 10KB.

3. Desain Konsisten — Menggunakan skala warna, spacing, dan font yang seragam.

Contoh Komponen Card Tailwind:

<div className="max-w-md mx-auto bg-white rounded-2xl shadow-md overflow-hidden p-6 border border-slate-100 hover:shadow-xl transition-shadow">
  <div className="flex items-center gap-4">
    <div className="w-12 h-12 rounded-full bg-cyan-500 text-white flex items-center justify-center font-bold text-xl">
      CB
    </div>
    <div>
      <h3 className="text-lg font-bold text-slate-900">CodeBook Mastery</h3>
      <p className="text-sm text-slate-500">Belajar Tailwind CSS dari Nol</p>
    </div>
  </div>
  <button className="mt-4 w-full py-2.5 px-4 bg-cyan-600 hover:bg-cyan-700 text-white text-sm font-semibold rounded-xl transition-colors">
    Mulai Modul
  </button>
</div>

Spacing & Typography Rules