Tailwind CSS to build a visualization for Stripe Issuing Elements

tailwind-issuing-elements.html

<div class="w-96 h-56 m-auto bg-red-100 rounded-xl relative text-white shadow-2xl transition-transform transform hover:scale-110">
  <div class="relative object-cover w-full h-full rounded-xl bg-gradient-to-r from-teal-400 to-blue-400" ></div>
  <div class="w-full px-8 absolute top-8">
    <div class="flex justify-between">
      <div>
        <span class="font-light">Name</span>
        <p id="cardholder-name" class="font-medium tracking-widest">
          Jenny Rosen
        </p>
      </div>
    </div>

    <div class="pt-4">
      <span class="font-light">Card Number</span>
      <p id="card-number" class="font-medium tracking-widest">
        4242 4242 4242 4242
      </p>
    </div>

    <div class="pt-4 pr-6">
      <div class="flex justify-between">
        <div>
          <span class="font-light text-xs">Expiry</span>
          <p id="card-expiry" class="font-medium tracking-wider text-sm">
          08 / 35
          </p>
        </div>

        <div>
          <span class="font-light text-xs"> CVV </span>
          <p id="card-cvc" class="font-bold tracking-more-wider text-sm">
          888
          </p>
        </div>
      </div>
    </div>
  </div>
</div>