Promotional Reward Card with Ticket Graphic

<div
  class="group border-brand-lime overflow-hidden flex flex-col h-96 border rounded-3xl pt-8 pr-8 pb-8 pl-8 relative gap-x-6 gap-y-6 justify-between">
  <!-- Content -->
  <div class="relative z-10">
    <div class="flex justify-between items-start mb-4">
      <span class="inline-block px-3 py-1 rounded-full border border-black/10 text-xs font-medium text-black/60 bg-black/5 uppercase tracking-wide">
                            Free Coins
                        </span>
      <span class="text-black/20 font-mono text-3xl font-semibold">03</span>
    </div>

    <h3 class="text-3xl font-semibold tracking-tight text-brand-black mb-3">Free Sweep Coins</h3>
    <p class="text-lg text-brand-black/70 leading-snug">Earn for free every day! Join the community.</p>
  </div>

  <!-- Ticket Graphic -->
  <div class="absolute bottom-8 right-8 group-hover:scale-110 transition-transform duration-500">
    <div class="relative">
      <!-- Black Ticket -->
      <div
        class="absolute -left-6 top-6 bg-brand-black text-white w-40 h-20 rounded-xl flex items-center justify-center -rotate-12 shadow-xl z-10 border border-white/10">
        <div class="flex items-center gap-2">
          <span class="font-bold tracking-widest text-sm">CASINO</span>
          <div class="bg-white text-black w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold">#1
          </div>
        </div>
        <!-- Cutouts -->
        <div class="absolute -left-2 top-1/2 -translate-y-1/2 w-4 h-4 bg-brand-lime rounded-full"></div>
        <div class="absolute -right-2 top-1/2 -translate-y-1/2 w-4 h-4 bg-brand-lime rounded-full"></div>
      </div>

      <!-- White Ticket -->
      <div
        class="bg-white text-black w-40 h-24 rounded-xl flex items-start p-4 rotate-12 shadow-2xl border border-black/5">
        <div class="w-full h-full flex flex-col justify-between">
          <span class="font-bold text-lg leading-none">GAMEON</span>
          <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em"
            viewBox="0 0 24 24" data-icon="solar:arrow-right-up-linear">
            <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
              d="M6 18L18 6m0 0H9m9 0v9"></path>
          </svg>
        </div>
      </div>
    </div>
  </div>
</div>