<div class="relative w-48 h-32">
    <div
        class="absolute w-full h-full transform rotate-6 rounded-xl bg-linear-to-br from-gray-900/50 to-gray-800/50 shadow-lg backdrop-blur-sm">
    </div>
    <div
        class="absolute w-full h-full rounded-xl bg-linear-to-r from-sky-800/90 to-sky-600/90 shadow-lg backdrop-blur-sm border border-white/20">
        <div class="p-4 h-full flex flex-col justify-between">
            <div class="flex justify-between items-start">
                <div class="text-xs font-mono text-white/75">Virtual Card</div>
                <x-flux::icon.wifi variant="solid" class="btn-primary-icon" />
            </div>
            <div class="text-xs font-mono text-white mt-4">•••• •••• •••• 1234</div>
            <div class="flex justify-between items-end">
                <div>
                    <div class="text-xs font-mono text-white/75">VALID THRU</div>
                    <div class="text-xs font-mono text-white">12/25</div>
                </div>
                <div class="h-6 w-6">
                    <i class="fas fa-credit-card text-white/75 text-lg"></i>
                </div>
            </div>
        </div>
    </div>
</div>
