Tailwind sangat cocok untuk membangun komponen UI. Berikut pattern umum:

Card:

<div class="rounded-xl border bg-white p-6 shadow-sm">
  <h3 class="text-lg font-semibold">Judul</h3>
  <p class="mt-2 text-gray-500">Deskripsi</p>
</div>

Badge:

<span class="inline-flex items-center rounded-full bg-green-100 px-2.5 py-0.5 text-xs font-medium text-green-800">
  Aktif
</span>

Avatar:

<img class="h-10 w-10 rounded-full object-cover" src="..." alt="avatar">

Input:

<input class="w-full rounded-md border border-gray-300 px-3 py-2 text-sm
              focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
       placeholder="Masukkan teks">

Alert:

<div class="flex items-center gap-3 rounded-lg border border-yellow-200 bg-yellow-50 p-4">
  <span class="text-yellow-600">⚠️</span>
  <p class="text-sm text-yellow-800">Perhatian!</p>
</div>