Send Code Verification Using Tailwind UI
Utilizing elegant Tailwind visual design, the verification code element is delivered with a minimalistic yet captivating aesthetic. design by Jordan Hughes from Dribbble
other
Loading component...
55 lines
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"
rel="stylesheet">
<style>
.body {
font-family: 'Plus Jakarta Sans', sans-serif;
}
input:not(:placeholder-shown) {
border: 1 solid;
border-color: #60a5fa;
}
</style>
<div class="bg-gray-100 min-h-screen flex items-center justify-center">
<div class="bg-white rounded-xl border shadow p-4 sm:p-8 mx-4 max-w-sm">
<svg class="w-6 h-6 mb-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M1.94631 9.31555C1.42377 9.14137 1.41965 8.86034 1.95706 8.6812L21.0433 2.31913C21.5717 2.14297 21.8748 2.43878 21.7268 2.95706L16.2736 22.0433C16.1226 22.5718 15.8179 22.5901 15.5946 22.0877L12.0002 14.0002L18.0002 6.00017L10.0002 12.0002L1.94631 9.31555Z">
</path>
</svg>
<h1 class="font-bold text-2xl text-gray-800 mb-1">Check your email</h1>
<p class="text-sm font-medium text-gray-600">We've sent a code to [email protected]</p>
<div class="mt-6">
<form action="" method="post">
<div class="flex items-center justify-center gap-4">
<input type="text" placeholder="1" maxlength="1" min="1" minlength="1" max="1" required
class="w-16 h-16 border rounded-lg p-4 text-center mx-auto hover:border-blue-200 focus:outline-none focus:ring focus:ring-blue-400 placeholder:font-medium font-bold text-xl text-blue-900">
<input type="text" placeholder="2" maxlength="1" min="1" minlength="1" max="1" required
class="w-16 h-16 border rounded-lg p-4 text-center mx-auto hover:border-blue-200 focus:outline-none focus:ring focus:ring-blue-400 placeholder:font-medium font-bold text-xl text-blue-900">
<input type="text" placeholder="3" maxlength="1" min="1" minlength="1" max="1" required
class="w-16 h-16 border rounded-lg p-4 text-center mx-auto hover:border-blue-200 focus:outline-none focus:ring focus:ring-blue-400 placeholder:font-medium font-bold text-xl text-blue-900">
<input type="text" placeholder="4" maxlength="1" min="1" minlength="1" max="1" required
class="w-16 h-16 border rounded-lg p-4 text-center mx-auto hover:border-blue-200 focus:outline-none focus:ring focus:ring-blue-400 placeholder:font-medium font-bold text-xl text-blue-900">
</div>
<div
class="flex flex-col md:flex-row items-center space-y-2 md:space-y-0 md:space-x-2 justify-between mx-auto w-full mt-6 mb-4">
<button type="reset"
class="w-full py-2.5 px-4 font-semibold border border-gray-200 text-gray-600 text-sm rounded-lg hover:text-gray-900 hover:border-gray-400">
Cancel
</button>
<button type="submit"
class="w-full py-2.5 bg-blue-600 px-4 font-semibold text-gray-50 text-sm rounded-lg hover:bg-blue-800 hover:text-white">
Verify
</button>
</div>
</form>
</div>
<small class="text-center block text-xs text-gray-600 font-medium">Didn't get a code? <a href=""
class="underline font-semibold text-gray-900 hover:text-blue-600">Click to resend</a></small>
</div>
</div>