Breaking News: Grepper is joining You.com. Read the official announcement!

verification code tailwind

Sakar Hamasaeed answered on December 22, 2022 Popularity 6/10 Helpfulness 3/10

answer verification code tailwind

verification code tailwind

Comment

<!-- OTP code design -->

<div class="h-screen bg-blue-500 py-20 px-3">
    <div class="container mx-auto">
        <div class="max-w-sm mx-auto md:max-w-lg">
            <div class="w-full">
                <div class="bg-white h-64 py-3 rounded text-center">
                      <h1 class="text-2xl font-bold">OTP Verification</h1>
                      <div class="flex flex-col mt-4">
                          <span>Enter the OTP you received at</span>
                          <span class="font-bold">+91 ******876</span>
                      </div>
                      
                      <div id="otp" class="flex flex-row justify-center text-center px-2 mt-5">
            <input class="m-2 border h-10 w-10 text-center form-control rounded" type="text" id="first" maxlength="1" /> 
            <input class="m-2 border h-10 w-10 text-center form-control rounded" type="text" id="second" maxlength="1" /> 
            <input class="m-2 border h-10 w-10 text-center form-control rounded" type="text" id="third" maxlength="1" /> 
            <input class="m-2 border h-10 w-10 text-center form-control rounded" type="text" id="fourth" maxlength="1" />
            <input class="m-2 border h-10 w-10 text-center form-control rounded" type="text" id="fifth" maxlength="1" /> 
            <input class="m-2 border h-10 w-10 text-center form-control rounded" type="text" id="sixth" maxlength="1" />
                      </div>
                      
                      <div class="flex justify-center text-center mt-5">
                          <a class="flex items-center text-blue-700 hover:text-blue-900 cursor-pointer"><span class="font-bold">Resend OTP</span><i class='bx bx-caret-right ml-1'></i></a>
                      </div>
                </div>
            </div>
        </div>
    </div>
</div>

Popularity 6/10 Helpfulness 3/10 Language html

Source: bbbootstrap.com

Tags: account html verification verify

Link to this answer
Share Copy Link

Contributed on Dec 22 2022

Sakar Hamasaeed

0 Answers Avg Quality 2/10

verification code tailwind

Contents

More Related Answers

verification code tailwind

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.