Responsive Tailwind KPI Stat Cards Grid

<div class="space-y-6">
  <!-- Row 1: Two cards -->
  <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 lg:gap-6">
    <div
      class="bg-gradient-to-br from-blue-900/20 to-black border border-blue-500/20 rounded-2xl p-6 backdrop-blur-xl hover:border-blue-400/40 transition-all duration-300 scroll-animate scale-in delay-500 visible">
      <div class="flex items-center justify-between mb-4">
        <div class="h-10 w-10 rounded-xl bg-blue-500/15 flex items-center justify-center">
          <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="text-blue-300">
            <line x1="12" x2="12" y1="2" y2="22" class=""></line>
            <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" class=""></path>
          </svg>
        </div>
        <span class="text-xs font-medium text-blue-300 bg-blue-500/20 px-2.5 py-1 rounded-lg font-geist">+24%</span>
      </div>
      <p class="text-2xl lg:text-3xl text-white font-bricolage font-light mb-1">$847K</p>
      <p class="text-sm text-blue-200/80 font-geist">Revenue tracked</p>
    </div>

    <div
      class="bg-gradient-to-br from-green-900/20 to-black border border-green-500/20 rounded-2xl p-6 backdrop-blur-xl hover:border-emerald-400/40 transition-all duration-300 scroll-animate scale-in delay-600 visible">
      <div class="flex items-center justify-between mb-4">
        <div class="h-10 w-10 rounded-xl bg-green-500/15 flex items-center justify-center">
          <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="text-green-300">
            <path d="M12 6v6l4 2" class=""></path>
            <circle cx="12" cy="12" r="10" class=""></circle>
          </svg>
        </div>
        <span class="text-xs font-medium text-green-300 bg-green-500/20 px-2.5 py-1 rounded-lg font-geist">-18%</span>
      </div>
      <p class="text-2xl lg:text-3xl text-white font-bricolage font-light mb-1">12.4</p>
      <p class="text-sm text-green-200/80 font-geist">Avg. pay days</p>
    </div>
  </div>

  <!-- Row 2: Two cards -->
  <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 lg:gap-6">
    <div
      class="bg-gradient-to-br from-purple-900/20 to-black border border-purple-500/20 rounded-2xl p-6 backdrop-blur-xl hover:border-purple-400/40 transition-all duration-300 scroll-animate scale-in delay-500 visible">
      <div class="flex items-center justify-between mb-4">
        <div class="h-10 w-10 rounded-xl bg-purple-500/15 flex items-center justify-center">
          <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="text-purple-300">
            <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" class=""></path>
            <path d="M16 3.128a4 4 0 0 1 0 7.744" class=""></path>
            <path d="M22 21v-2a4 4 0 0 0-3-3.87" class=""></path>
            <circle cx="9" cy="7" r="4" class=""></circle>
          </svg>
        </div>
        <span class="text-xs font-medium text-purple-300 bg-purple-500/20 px-2.5 py-1 rounded-lg font-geist">+8</span>
      </div>
      <p class="text-2xl lg:text-3xl text-white font-bricolage font-light mb-1">342</p>
      <p class="text-sm text-purple-200/80 font-geist">Active clients</p>
    </div>

    <div
      class="bg-gradient-to-br from-orange-900/20 to-black border border-orange-500/20 rounded-2xl p-6 backdrop-blur-xl hover:border-amber-400/40 transition-all duration-300 scroll-animate scale-in delay-600 visible">
      <div class="flex items-center justify-between mb-4">
        <div class="h-10 w-10 rounded-xl bg-orange-500/15 flex items-center justify-center">
          <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="text-orange-300">
            <path d="M21.801 10A10 10 0 1 1 17 3.335" class=""></path>
            <path d="m9 11 3 3L22 4" class=""></path>
          </svg>
        </div>
        <span class="text-xs font-medium text-orange-300 bg-orange-500/20 px-2.5 py-1 rounded-lg font-geist">98.2%</span>
      </div>
      <p class="text-2xl lg:text-3xl text-white font-bricolage font-light mb-1">1,247</p>
      <p class="text-sm text-orange-200/80 font-geist">Invoices sent</p>
    </div>
  </div>
</div>