Login

This tailwind example is contributed by Rushikesh Latpate, on 25-Dec-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Register, Sign in

Author Rushikesh Latpate

404

Fork Fullscreen

<h1 class="text-2xl xl:text-2xl font-semibold">
                  <div class='marathiShasan'> Sugam24 Services </div>
                  </h1>
                  <br>
                  <div class="marathiShasan"> Income & Expenditure Register </div>

<h2>
                  Authentication                  </h2>
                  
                  
                  <div class="w-full flex-1 mt-8">
                      <form method="post" action="">
                      <div class="mx-auto max-w-xs">
                          <div class="relative mt-6">
                              <input type="number" name="phone" value="" onkeyup="showHint(this.value)" autocomplete="off" id="phoneNo" placeholder="Phone Number" class="peer mt-2 w-full bg-transparent border-b-2  border-gray-300 px-0 py-1 placeholder:text-transparent focus:border-gray-500 focus:outline-none" autocomplete="NA" />
                              <label for="email" class="pointer-events-none absolute top-0 left-0 origin-left -translate-y-1/2 bg-transparent transform text-sm text-gray-800 opacity-75 transition-all duration-100 ease-in-out peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-500 peer-focus:top-0 peer-focus:pl-0 peer-focus:text-sm peer-focus:text-gray-800"><span id="txtHint">Enter Phone Number</span></label>
                          </div>
                          <div class="relative mt-6">
                              <input type="password" name="password" id="password" placeholder="Password" class="peer peer mt-2 w-full bg-transparent border-b-2  border-gray-300 px-0 py-1 placeholder:text-transparent focus:border-gray-500 focus:outline-none" />
                              <label for="password" class="pointer-events-none absolute top-0 left-0 origin-left -translate-y-1/2 transform text-sm text-gray-800 opacity-75 transition-all duration-100 ease-in-out peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-500 peer-focus:top-0 peer-focus:pl-0 peer-focus:text-sm peer-focus:text-gray-800">PIN OR Password</label>
                          </div>

<div class="flex items-center justify-between mt-8">
                              <button type="submit" class="text-white bg-gradient-to-r from-purple-500 via-purple-600 to-purple-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-purple-300 dark:focus:ring-purple-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2">Login</button>
                              <a href='#' class="font-normal text-gray-500">
                              Forgot PIN?
                              </a>
                          </div>
                      </div>
                      </form>
                  </div>

<button
                                  class="w-full max-w-xs font-bold shadow-sm rounded-lg py-3 bg-indigo-100 text-gray-800 flex items-center justify-center transition-all duration-300 ease-in-out focus:outline-none hover:shadow focus:shadow-sm focus:shadow-outline mt-5">
                                  <div class="bg-white p-1 rounded-full">
                                      <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-chat-left-text" viewBox="0 0 16 16">
                                        <path d="M14 1a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H4.414A2 2 0 0 0 3 11.586l-2 2V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12.793a.5.5 0 0 0 .854.353l2.853-2.853A1 1 0 0 1 4.414 12H14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z"/>
                                        <path d="M3 3.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5M3 6a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9A.5.5 0 0 1 3 6m0 2.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5"/>
                                      </svg>
                                  </div>
                                  <span class="ml-4">
                                      Token &nbsp;&nbsp;&nbsp;&nbsp;
                                  </span>
                              </button>

</div>

</div>
              </div>
              <div class="flex-1 bg-indigo-100 text-center hidden lg:flex">
                  <div class="m-12 xl:m-16 w-full bg-contain bg-center bg-no-repeat"
                      style="background-image: url('../web/img/loginBackGround.jpg');">
                  </div>
              </div>
          </div>
      </div>

<script>
      function showHint(str) {
          if (str.length == 0) {
              document.getElementById("txtHint").innerHTML = "Enter Phone Number";
              return;
          } else if (str.length == 12) {
            let strlenth = str;
              document.getElementById("txtHint").innerHTML = "";
          } else if (str.length < 12) {
            let strlenth = str;
              document.getElementById("txtHint").innerHTML = "Enter number with <font color=#f97316 > Country Code </font>";
          } else if (str.length > 12) {
            let strlenth = str;
              document.getElementById("txtHint").innerHTML = "<font color=red >Only 12 Digit Required</font>";
          } else {
              document.getElementById("txtHint").innerHTML = "Error";
          }
      }
      </script>

Related Examples