Circular Limit Progress Card (Donut Chart)

<div class="grid grid-cols-2 gap-3 mt-3">
  <!-- Limit donut -->
  <div class="ring-1 ring-white/10 rounded-2xl pt-3 pr-3 pb-3 pl-3">
    <div class="flex items-start justify-between">
      <div>
        <p class="text-xs text-white/60">Your Limit</p>
        <p class="text-sm font-medium">$2300</p>
      </div>
      <button class="text-white/40 hover:text-white/70">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="more-horizontal" class="lucide lucide-more-horizontal h-4 w-4"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></svg>
                    </button>
    </div>
    <div class="mt-4 flex items-center justify-center">
      <div class="relative h-16 w-16">
        <svg viewBox="0 0 36 36" class="h-16 w-16 -rotate-90">
          <path d="M18 2 a 16 16 0 1 1 0 32 a 16 16 0 1 1 0 -32" fill="none" stroke="rgba(255,255,255,0.12)"
            stroke-width="4"></path>
          <path d="M18 2 a 16 16 0 0 1 11.3 4.7" fill="none" stroke="rgb(34,197,94)" stroke-width="4"
            stroke-linecap="round"></path>
          <path d="M29.3 6.7 A16 16 0 0 1 18 34" fill="none" stroke="rgb(6,182,212)" stroke-width="4"
            stroke-linecap="round"></path>
          <path d="M18 34 A16 16 0 0 1 18 2" fill="none" stroke="rgb(168,85,247)" stroke-width="4"
            stroke-linecap="round"></path>
        </svg>
        <div class="absolute inset-0 grid place-items-center">
          <span class="text-xs text-white/70">23%</span>
        </div>
      </div>
    </div>
  </div>