Event Pass Card

<div class="w-80 border-[6px] border-black bg-white shadow-[12px_12px_0_0_#000000]">
        <div class="bg-yellow-400 p-8 border-b-[6px] border-black relative overflow-hidden">
            <div class="absolute -top-4 -right-4 w-20 h-20 bg-black rotate-45"></div>
            <h2 class="text-4xl font-black italic tracking-tighter text-black uppercase leading-none">DESIGN <br> CON
                '24</h2>
        </div>
        <div class="p-8 space-y-6">
            <div>
                <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1">Speaker</p>
                <p class="font-black text-2xl tracking-tight leading-none text-black">TOBIAS VAN <br> SCHNEIDER</p>
            </div>
            <div class="grid grid-cols-2 gap-8 pt-8 border-t-4 border-dashed border-slate-100">
                <div>
                    <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1">Date</p>
                    <p class="font-black text-lg text-black">OCT 12-14</p>
                </div>
                <div class="text-right">
                    <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1">Seat</p>
                    <p class="font-black text-lg text-black">A-12 VIP</p>
                </div>
            </div>
            <div class="pt-6 flex justify-center grayscale opacity-10">
                <div
                    class="h-14 w-full bg-[repeating-linear-gradient(90deg,black,black_3px,transparent_3px,transparent_8px)]">
                </div>
            </div>
        </div>
    </div>