Tailwind Stats Banner with Image Background

<div class="max-w-7xl mr-auto ml-auto pr-6 pl-6">
  <div
    class="sm:p-10 text-white bg-emerald-900 bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/5dcd0c14-fe23-45bd-8342-afa6ed57a1ad_3840w.jpg)] bg-cover rounded-3xl pt-8 pr-8 pb-8 pl-8"
    style="">
    <div class="grid md:grid-cols-4 gap-8 items-start">
      <div class="">
        <p class="text-3xl font-medium tracking-tight" style="">68k+</p>
        <p class="text-sm text-emerald-100 mt-1 font-sans">Interfaces shipped</p>
      </div>
      <div class="">
        <p class="text-3xl font-medium tracking-tight" style="">15×</p>
        <p class="text-sm text-emerald-100 mt-1 font-sans">Faster iterations</p>
      </div>
      <div class="">
        <p class="text-3xl font-medium tracking-tight" style="">10M</p>
        <p class="text-sm text-emerald-100 mt-1 font-sans">Targeted conversions</p>
      </div>
      <div class="flex items-start gap-3">
        <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="map-pin"
          class="lucide lucide-map-pin h-5 w-5 mt-1">
          <path
            d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0">
          </path>
          <circle cx="12" cy="10" r="3"></circle>
        </svg>
        <p class="text-sm text-green-950">
          Seamless mobile and web experiences backed by research, design systems, and clear communication.
        </p>
      </div>
    </div>
  </div>
</div>