Payment Stats

            <div class="flex justify-center items-center bg-gray-100 w-full min-h-screen text-gray-800">
  <div class="rounded-2xl p-6 bg-white grid grid-cols-3 gap-6 shadow-xl">
    <div class="col-span-2">
      <h1 class="font-medium text-gray-400 pl-4">PAYMENT RECEIVED</h1>
      <div class="font-bold text-2xl text-gray-400 tracking-wider py-2">$<span class="text-5xl text-gray-800">23,605.04</span></div>
      <div class="rounded-full ml-4 mt- px-4 py-1 bg-green-100 text-green-600 inline-block">24% above defined goal</div>
    </div>
    <div>
      <div class="font-medium text-blue-600 flex items-center"><svg height="10" width="10" class="mr-2 animate-ping">
          <circle cx="5" cy="5" r="4" fill="currentColor" />
        </svg> Pending</div>
      <div class="text-xl tracking-wide font-semibold">$3,299.41</div>
      <div class="font-medium text-yellow-600 flex items-center mt-4"><svg height="10" width="10" class="mr-2">
          <circle cx="5" cy="5" r="4" fill="currentColor" />
        </svg> Refunds</div>
      <div class="text-xl tracking-wide font-semibold">$431.60</div>
    </div>
  </div>
</div>