Onboarding step

            <div class="flex justify-center items-center bg-gray-100 w-full min-h-screen text-gray-800">
  <div class="rounded-xl bg-white w-full p-8 max-w-xl shadow-lg">
    <div class="flex justify-between items-center mb-2">
      <h1 class="text-2xl font-bold">Setup 2FA</h1>
      <div class="text-gray-400 font-semibold tracking-wider">Step <span class="text-green-600">2</span>/3</div>
    </div>
    <p class="text-gray-400 mb-6">Secure your account with two factor authentication via phone OTP.</p>
    <form>
      <div class="flex items-center mb-10"><label class="relative flex items-center border-b-2"><img src="https://www.countryflags.io/us/flat/24.png"><select class="p-2 appearance-none rounded-none pr-7">
            <option value="+1">United States</option>
            <option value="+31">Netherlands</option>
            <option value="+91">India</option>
          </select><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" class="absolute top-3 right-1 text-gray-400 pointer-events-none">
            <path d="M3.204 5h9.592L8 10.481 3.204 5zm-.753.659l4.796 5.48a1 1 0 0 0 1.506 0l4.796-5.48c.566-.647.106-1.659-.753-1.659H3.204a1 1 0 0 0-.753 1.659z" />
          </svg></label><label class="ml-2 flex-1"><input type="text" pattern="\d*" maxlength="10" placeholder="Phone Number" class="w-full p-2 border-b-2"></label></div>
      <div class="flex items-center justify-between"><button class="rounded px-6 py-2 transition-colors text-gray-400 hover:text-gray-600 font-semibold">Back</button> <button type="submit" class="rounded px-6 py-2 bg-green-500 hover:bg-green-600 transition-colors text-white font-semibold">Next</button></div>
    </form>
  </div>
</div>