Belajar Tailwind CSS

index.html

<div class="m-2">
  <button class="cursor-pointer rounded-lg border-2 border-gray-950 bg-blue-300 bg-gradient-to-tr from-blue-400 to-yellow-400 p-2.5 text-white hover:bg-gradient-to-tl">Click Me</button>
</div>

<div class="flex h-10 w-10 items-center justify-center rounded-full border-2 border-blue-500 bg-blue-400 font-bold text-white shadow-2xl">MA</div>

<div class="h-screen w-full bg-gray-400 p-10">
  <div class="w-full max-w-[400px] rounded-3xl bg-white p-4">
    <div class="p-2">
      <div class="mb-10">Payment Template</div>
    <div class="mb-2 text-2xl font-bold">$468.32</div>

    </div>
    <div class="rounded-2xl border border-gray-200 p-2.5">
      <div class="mb-10 flex items-center justify-between">
        <div>
          <div class="font-semibold">Mandatory Payments</div>
          <div class="text-sm text-gray-500">Essentials due</div>
        </div>
        <div class="rounded-full bg-gray-200 p-2 text-gray-500">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right-icon lucide-arrow-up-right">
            <path d="M7 7h10v10" />
            <path d="M7 17 17 7" />
          </svg>
        </div>
      </div>

      <div class="flex">
        <div class="flex h-14 w-14 items-center justify-center rounded-full border bg-blue-100">AB</div>
        <div class="-ml-5 flex h-14 w-14 items-center justify-center rounded-full border bg-red-100">IH</div>
        <div class="-ml-5 flex h-14 w-14 items-center justify-center rounded-full border bg-blue-100">CF</div>
        <div class="-ml-5 flex h-14 w-14 items-center justify-center rounded-full border bg-yellow-100">+8</div>
      </div>
    </div>
  </div>
</div>