<main class="flex min-h-screen justify-center items-center px-5 sm:px-10 lg:px-0">
<div class="flex flex-col gap-6 w-full max-w-sm">
<div class="flex flex-col items-center gap-2 text-center">
<div class="size-12 bg-primary text-white rounded-ui d-flex-place-center mx-auto mb-4">
<svg aria-hidden="true" width="488" height="488" class="size-7" viewBox="0 0 488 488" fill="none"
xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_13_164)">
<path
d="M71.5342 71L416.602 416.068V416.068C321.314 511.356 166.822 511.356 71.5342 416.068V416.068C-23.7537 320.78 -23.7537 166.288 71.5342 71V71Z"
fill="currentColor" class=""></path>
<path
d="M483.659 249.5C483.659 274.629 436.788 344.5 411.659 344.5C386.53 344.5 392.659 274.629 392.659 249.5C392.659 224.371 413.03 204 438.159 204C463.288 204 483.659 224.371 483.659 249.5Z"
fill="currentColor" class=""></path>
<circle cx="243.429" cy="243.759" r="110" transform="rotate(48.3973 243.429 243.759)"
fill="currentColor" stroke="white" stroke-width="80" class="stroke-primary"></circle>
<path
d="M309 71C309 96.129 212.629 101 187.5 101C162.371 101 142 80.629 142 55.5C142 30.371 162.371 10 187.5 10C212.629 10 309 45.871 309 71Z"
fill="currentColor" class=""></path>
<path
d="M417 101.5C417 126.629 415.129 215.5 390 215.5C364.871 215.5 326 126.629 326 101.5C326 76.371 346.371 56 371.5 56C396.629 56 417 76.371 417 101.5Z"
fill="currentColor" class=""></path>
</g>
<defs>
<clipPath id="clip0_13_164">
<rect width="488" height="488" fill="currentColor" class="text-bg"></rect>
</clipPath>
</defs>
</svg>
</div>
<h1 class="text-xl font-semibold text-fg-title text-balance">
We sent a 6-digit code to your email address
</h1>
</div>
<form class="flex flex-col gap-4">
<x-ui.otp class="w-full">
<div class="flex items-center gap-2 flex-1">
<x-ui.otp.input size="none" class="size-10 flex-1" />
<x-ui.otp.input size="none" class="size-10 flex-1" />
<x-ui.otp.input size="none" class="size-10 flex-1" />
</div>
<span class="flex min-w-max px-3 text-2xl font-semibold text-fg-muted">
-
</span>
<div class="flex items-center gap-2 flex-1">
<x-ui.otp.input size="none" class="size-10 flex-1" />
<x-ui.otp.input size="none" class="size-10 flex-1" />
<x-ui.otp.input size="none" class="size-10 flex-1" />
</div>
</x-ui.otp>
<p class="text-sm text-fg-muted text-center">
Didn't receive the code?
<x-ui.link href="#" underlined class="text-primary">
Resend
</x-ui.link>
</p>
<x-ui.button class="w-full justify-center">
Verify
</x-ui.button>
</form>
<p class="px-6 text-center text-fg-muted mx-auto max-w-md text-sm mt-3">
By clicking continue, you agree to our
<x-ui.link href="#" underlined class="text-primary">Terms of Service</x-ui.link>
and <x-ui.link href="#" underlined class="text-primary">Privacy Policy</x-ui.link>.
</p>
</div>
</main>
Auth
Authentication components including password reset, confirmation, and OTP forms