Scrollable Gradient Credit Card Tile (Tailwind)

<div class="flex gap-3 overflow-x-auto no-scrollbar pb-1" style="scrollbar-width: none;">
  <div
    class="min-w-[270px] ring-1 ring-white/10 bg-gradient-to-tr from-indigo-500/40 to-cyan-400/30 rounded-2xl pt-4 pr-4 pb-4 pl-4">
    <div class="flex items-center justify-between">
      <div class="h-8 w-8 rounded-full bg-white/20 backdrop-blur"></div>
      <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="shield"
        class="lucide lucide-shield h-4 w-4 text-white/80">
        <path
          d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z">
        </path>
      </svg>
    </div>
    <p class="mt-6 tracking-widest text-lg font-medium text-white/90">1253 5432 3521 3090</p>
    <div class="mt-6 flex items-center justify-between text-xs">
      <div class="">
        <p class="text-white/50">Exp</p>
        <p class="text-white/80">09/24</p>
      </div>
      <div class="text-right">
        <p class="text-white/50">CVV</p>
        <p class="text-white/80">341</p>
      </div>
    </div>
  </div>