Promotional Card with Floating Casino Graphics

<div
  class="group overflow-hidden flex flex-col h-96 border-white/10 border rounded-3xl pt-8 pr-8 pb-8 pl-8 relative justify-between">
  <!-- Content -->
  <div class="z-10 relative">
    <div class="flex mb-4 items-start justify-between">
      <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">
                            Play for Free
                        </span>
      <span class="text-black/10 font-mono text-3xl font-semibold">02</span>
    </div>

    <!-- Floating Card Graphic Emulation -->
    <div class="absolute right-0 top-1/4 translate-x-10 group-hover:translate-x-5 transition-transform duration-500">
      <!-- Playing Card 1 -->
      <div
        class="w-32 h-44 bg-white rounded-xl shadow-xl border border-gray-200 absolute right-10 rotate-12 flex items-center justify-center">
        <span class="iconify text-brand-black w-12 h-12" data-icon="solar:spades-bold"></span>
        <span class="absolute top-2 left-3 font-bold text-lg text-brand-black">7</span>
        <span class="absolute bottom-2 right-3 font-bold text-lg text-brand-black rotate-180">7</span>
      </div>
      <!-- Chip -->
      <div
        class="w-16 h-16 rounded-full bg-brand-black border-4 border-gray-700 shadow-2xl absolute -left-4 bottom-0 flex items-center justify-center">
        <div class="w-12 h-12 rounded-full border border-dashed border-gray-500"></div>
      </div>
      <div
        class="w-16 h-16 rounded-full bg-brand-lime border-4 border-[#b0d648] shadow-2xl absolute right-16 -top-4 flex items-center justify-center">
        <div class="border-dashed w-12 h-12 border-white/50 border rounded-full"></div>
      </div>
    </div>

    <div class="mt-40">
      <h3 class="text-3xl font-semibold tracking-tight text-brand-black mb-3">No purchase necessary!</h3>
      <p class="text-lg text-gray-600 leading-snug">Play without payment today! Fully social experience.</p>
    </div>
  </div>
</div>