Payment Transactions Status Card

<article class="overflow-hidden bg-[#14161b] border-[#232326] border rounded-2xl shadow-xl">
  <div class="flex gap-2 pt-5 pr-5 pb-5 pl-5 items-center">
    <span class="w-5 h-5 text-lime-400" aria-label="money">
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="" data-icon-replaced="true" data-lucide="credit-card" style="width: 18px; height: 18px; color: rgb(163, 230, 53);"><rect width="20" height="14" x="2" y="5" rx="2" class=""></rect><line x1="2" x2="22" y1="10" y2="10" class=""></line></svg>
          </span>
    <h3 class="text-xl font-semibold tracking-tight">Payments Without Limits</h3>
  </div>
  <p class="px-5 pb-4 text-sm text-gray-300">Send and receive payments anytime, anywhere, without
    restrictions—empowering your business to operate freely.</p>

  <div class="px-5 pb-5">
    <div class="space-y-2">
      <!-- row 1 -->
      <div class="flex items-center justify-between bg-black/40 rounded-lg px-3 py-2">
        <div class="flex items-center gap-3">
          <img class="w-9 h-9 rounded-full object-cover" src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/3f997297-bf7a-497b-a750-c13916f1f09f_320w.jpg" alt="">
          <div class="">
            <div class="text-sm font-semibold">Arjun Malik</div>
            <div class="text-xs text-gray-300">arjun.malik@example.com</div>
          </div>
        </div>
        <span class="px-2 py-1 text-xs rounded-full bg-green-600 text-white">Approved</span>
      </div>
      <!-- row 2 -->
      <div class="flex items-center justify-between bg-black/40 rounded-lg px-3 py-2">
        <div class="flex items-center gap-3">
          <img class="w-9 h-9 rounded-full object-cover" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/bcaefeee-31cd-4c69-9a33-39ee0ad78c30_320w.jpg" alt="">
          <div class="">
            <div class="text-sm font-semibold">Ravi Kumar</div>
            <div class="text-xs text-gray-300">ravi.kumar@example.com</div>
          </div>
        </div>
        <span class="px-2 py-1 text-xs rounded-full bg-green-600 text-white">Approved</span>
      </div>
      <!-- row 3 -->
      <div class="flex items-center justify-between bg-black/40 rounded-lg px-3 py-2">
        <div class="flex items-center gap-3">
          <img class="w-9 h-9 rounded-full object-cover" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/46ced6a9-43d9-4cb3-9d41-e60c4df9040e_320w.jpg" alt="">
          <div>
            <div class="text-sm font-semibold">Dev Patel</div>
            <div class="text-xs text-gray-300">dev.patel@example.com</div>
          </div>
        </div>
        <span class="px-2 py-1 text-xs rounded-full bg-yellow-600 text-white">Pending</span>
      </div>
    </div>
  </div>
</article>