Digital Boarding Pass Card

<div
  class="relative rounded-3xl text-white shadow-2xl overflow-hidden transform hover:scale-105 transition-all duration-300"
  style="background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);" data-component="boarding-pass">
  <style>
    .boarding-pass:before,
    .boarding-pass:after {
      content: '';
      position: absolute;
      top: 50%;
      width: 24px;
      height: 24px;
      background: #f8fafc;
      border-radius: 9999px;
      transform: translateY(-50%);
      z-index: 10;
    }

    .boarding-pass:before {
      left: -12px;
    }

    .boarding-pass:after {
      right: -12px;
    }

    .dashed-line {
      border-top: 2px dashed rgba(255, 255, 255, 0.3);
      margin: 1.5rem 0;
    }
  </style>
  <div class="boarding-pass p-6 sm:p-8">
    <div class="flex items-center justify-between text-sm font-semibold tracking-wider">
      <div class="flex items-center gap-2">
        <i data-lucide="plane" class="w-5 h-5"></i><span class="text-base">AEROLUX</span></div>
      <div class="text-right">
        <div class="text-lg font-bold">AL 2847</div>
        <div class="text-xs opacity-90">15 DEC 2024</div>
      </div>
    </div>
    <div class="mt-8 flex items-center justify-between">
      <div class="text-left">
        <div class="text-5xl sm:text-6xl font-black leading-none tracking-tight">NYC</div>
        <div class="text-xs mt-2 opacity-90 font-medium">LaGuardia Airport</div>
        <div class="text-sm mt-1 font-bold">07:25 AM EST</div>
      </div>
      <div class="flex flex-col items-center px-4"><i data-lucide="plane" class="w-8 h-8 rotate-90 opacity-80"></i>
        <div class="text-xs mt-2 opacity-75">5h 32m</div>
      </div>
      <div class="text-right">
        <div class="text-5xl sm:text-6xl font-black leading-none tracking-tight">LAX</div>
        <div class="text-xs mt-2 opacity-90 font-medium">Los Angeles Intl</div>
        <div class="text-sm mt-1 font-bold">10:57 AM PST</div>
      </div>
    </div>
    <div class="mt-8">
      <div class="text-xl font-bold tracking-wide">SOFIA MARTINEZ</div>
      <div class="text-sm opacity-90 mt-1">Confirmation: AX7K92</div>
    </div>
    <div class="mt-6 flex gap-2 flex-wrap">
      <span class="rounded-full bg-white/20 px-4 py-2 text-xs font-semibold backdrop-blur-sm flex items-center gap-1"><i data-lucide="crown" class="w-3 h-3"></i>BUSINESS</span><span class="rounded-full bg-white/20 px-4 py-2 text-xs font-semibold backdrop-blur-sm flex items-center gap-1"><i data-lucide="wifi" class="w-3 h-3"></i>WIFI</span><span class="rounded-full bg-white/20 px-4 py-2 text-xs font-semibold backdrop-blur-sm flex items-center gap-1"><i data-lucide="utensils" class="w-3 h-3"></i>MEAL</span>
    </div>
    <div class="mt-8 grid grid-cols-5 gap-3 text-xs font-semibold tracking-wider">
      <div class="text-center">
        <div class="flex items-center justify-center mb-1"><i data-lucide="clock" class="w-3 h-3 opacity-80"></i></div>
        <span class="block opacity-80 text-xs">BOARDING</span><span class="text-lg font-black">06:45</span>
      </div>
      <div class="text-center">
        <div class="flex items-center justify-center mb-1"><i data-lucide="building" class="w-3 h-3 opacity-80"></i>
        </div><span class="block opacity-80 text-xs">TERMINAL</span><span class="text-lg font-black">B</span>
      </div>
      <div class="text-center">
        <div class="flex items-center justify-center mb-1"><i data-lucide="map-pin" class="w-3 h-3 opacity-80"></i>
        </div><span class="block opacity-80 text-xs">GATE</span><span class="text-lg font-black">C14</span>
      </div>
      <div class="text-center">
        <div class="flex items-center justify-center mb-1"><i data-lucide="users" class="w-3 h-3 opacity-80"></i></div>
        <span class="block opacity-80 text-xs">GROUP</span><span class="text-lg font-black">1</span>
      </div>
      <div class="text-center">
        <div class="flex items-center justify-center mb-1"><i data-lucide="armchair" class="w-3 h-3 opacity-80"></i>
        </div><span class="block opacity-80 text-xs">SEAT</span><span class="text-lg font-black">2A</span>
      </div>
    </div>
    <div class="dashed-line"></div>
    <div class="flex items-center justify-between">
      <div class="flex items-center gap-2">
        <i data-lucide="shield-check" class="w-5 h-5"></i><span class="text-sm font-bold">TSA Pre✓ Clear</span></div>
      <div class="flex items-center gap-2 text-sm">
        <i data-lucide="smartphone" class="w-4 h-4"></i><span>Mobile Pass</span></div>
    </div>
    <div class="mt-6 flex justify-center">
      <div class="bg-white p-3 rounded-xl"><img src="https://api.qrserver.com/v1/create-qr-code/?size=120x120&data=AeroLux-AL2847-SOFIA-MARTINEZ-2A" alt="Boarding Pass QR Code" class="w-24 h-24">
      </div>
    </div>
    <div class="mt-4 text-center text-xs opacity-75">Scan at security checkpoint and gate</div>
  </div>
</div>