Login

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

Author Rushikesh Latpate

Tailwind v3.4 1.6k 7

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

Sign up form

Rajesh Maheshwari

1 year ago

1.7k
login
login

Omer fils ELENGA

9 months ago

668
Simple Login Form
Login Form Responsive Component

Ahita Bisma Adlula

1 year ago

2k
Sign up Form - Page

ABDO-SY

1 year ago

2k
Allconnect Logic

Mario Williams

10 months ago

583
Login

Aman kumar

1 year ago

1k
Contact us Form with Responsive

KULDEEP

1 year ago

1.2k
Sign In page CezeriLab

Sedat Kumcu

1 year ago

1.7k
Sign In Form
Clean and modern Sign In form with email, password, and "Forgot password" link. Fully responsive and styled with Tailwind CSS, perfect for SaaS platforms.

Lekhraj Ghimire

1 year ago

1.3k
Sign in form

Simon Scheffer

3 years ago

17k
Simple Login Form
Username and Password inputs with Login button. Very simple. You might like it.

Jerome Soriano

2 years ago

2.6k
Beautiful page login
form with continue with google and continue with github buttons

Wagner

1 year ago

2.2k