OTP Verification Form

<section class="grid place-items-center p-8 font-['Inter']">
    <article class="p-8 border rounded-xl grid gap-4 border-neutral-200 border-t-neutral-300 max-w-md">
        <h3 class="text-center font-semibold">Verify your identity</h3>
        <p class="text-center text-sm">Enter the confirmation code we sent your phone</span>

        <div class="flex gap-2 justify-center py-4">
            <input class="w-8 h-8 text-center focus:outline-none focus:ring focus:ring-blue-400 bg-white border rounded" type="password" maxlength="1" />
            <input class="w-8 h-8 text-center focus:outline-none focus:ring focus:ring-blue-400 bg-white border rounded" type="password" maxlength="1" />
            <input class="w-8 h-8 text-center focus:outline-none focus:ring focus:ring-blue-400 bg-white border rounded" type="password" maxlength="1" />
            <input class="w-8 h-8 text-center focus:outline-none focus:ring focus:ring-blue-400 bg-white border rounded" type="password" maxlength="1" />
            <input class="w-8 h-8 text-center focus:outline-none focus:ring focus:ring-blue-400 bg-white border rounded" type="password" maxlength="1" />
            <input class="w-8 h-8 text-center focus:outline-none focus:ring focus:ring-blue-400 bg-white border rounded" type="password" maxlength="1" />
        </div>

        <footer class="grid md:grid-cols-2 gap-2">
            <button class="text-sm font-semibold rounded-md hover:bg-neutral-100 duration-300 px-6 py-2">Resend Code</button>
            <button class="text-sm font-semibold rounded-md bg-neutral-100 hover:bg-neutral-900 hover:text-white px-6 duration-300 py-2">Verify Code</button>
        </footer>
    </article>
</section>