<div x-data="{ otp: ['','','','','',''], timer: 60, canResend: false, startTimer() { this.timer = 60; this.canResend = false; const interval = setInterval(() => { this.timer--; if (this.timer === 0) { this.canResend = true; clearInterval(interval); } }, 1000); } }" x-init="startTimer()" class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow p-8">
    <div class="flex gap-2 justify-center mb-6">
        <template x-for="(digit, index) in otp" :key="index">
            <input type="text" maxlength="1" x-model="otp[index]" @input="if ($event.target.value && index < 5) $el.nextElementSibling?.focus()" class="w-12 h-12 text-center text-lg font-bold border-2 rounded-lg">
        </template>
    </div>
    <button class="w-full bg-blue-600 text-white py-2 rounded-lg mb-4">Verify</button>
</div>