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

Payment Form

ABDO-SY

1 year ago

2.4k
GenzeStack Dumpy - Interactive Login Page with Mascot
A playful, fully responsive Tailwind CSS login component featuring "Dumpy" the GenzeStack mascot with interactive status tabs, custom SVG graphics, and dark mode support.

Sayista Yazdani

1 month ago

144
Premium Automotive Login Page with Animated SVG Illustration
Modern responsive automotive login page with animated SVG illustration, premium dark UI, password visibility toggle, and Tailwind CSS.

JUGENDRA GANGWAR

4 months ago

389
FacePass: Animated Image Authentication
"Where your image becomes your key" "Biometric meets beautiful animations" "A login experience that recognizes you – literally" "Security through personalized visual authentication" "Your face, animated, authenticated"

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

2k
Profile Form
Enhanced User Profile Form with Stunning Profile and Cover Image Fields

Steve NGOYA

1 year ago

1.6k
Login
Login

Amine Ghanim

1 year ago

2.1k
Animated Sign in background
Sign-in page with floating blobs as background.

Nii Anyetei

2 years ago

4.2k
Profile Form
Enhanced User Profile Form with Stunning Profile and Cover Image Fields

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

10.4k
Neo-Brutalist Login Form

JUGENDRA GANGWAR

3 weeks ago

31
OTP Verification Form
A six-digit one-time password verification interface with code inputs, email confirmation messaging, a verify button, and a resend-code option.

JUGENDRA GANGWAR

3 weeks ago

25
SingIn / Signup Form
A modern and responsive authentication card with Sign In & Sign Up options, featuring a seamless toggle and social login (Facebook, GitHub). Designed with Tailwind CSS, it offers a clean UI, smooth transitions, and full mobile responsiveness.

Rajesh Maheshwari

1 year ago

2.1k
LOGIN TEMPLATE
it is a login template

Sergio Gonzalez

1 year ago

1k