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

1.3k

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

Registration Form
Color Updates: - Changed gradient background to `from-indigo-800 to-blue-900` - Updated text colors to `text-indigo-800` and `text-indigo-900` - Changed button colors to match the new theme - Updated focus rings to use indigo colors Enhanced Styling: - Added smooth transitions with `transition-all duration-300` - Improved shadow with `shadow-2xl` - Added hover scale effect on button - Increased border radius to `rounded-xl` - Added fade-in animation for the form Improved Validation: - Added visual feedback for invalid fields - Added input event listeners to clear error states - Added trim() to username and email validation - Added form reset after successful submission Accessibility Improvements: - Maintained proper contrast ratios - Kept focus states visible - Added proper spacing for better readability - Ensured all interactive elements are properly styled Added Interactions: - Smooth hover transitions - Scale animation on button hover - Immediate feedback on input - Clear error messaging

Author:
nejaa badr

1 year ago

2.9k
Form
form

Author:
Aman kumar

1 year ago

2.1k
Login form responsive

Author:
Aman kumar

2 years ago

4k
Sign up
sign up page

Author:
gidy

9 months ago

1.4k
Sign up form
simple full-height register form

Author:
Lukas Müller

3 years ago

13k
login
login

Author:
Abhishek Kumar

6 months ago

870
login!!!!
html , css

Author:
Hacker Development

9 months ago

1.2k
Signup And Signin page
Signup And Signin page with tab controller

Author:
Akram Khan

1 year ago

2.9k
Responsive login form
form with social login buttons

Author:
Anonymous

1 month ago

53
Simple Login Form
Login Form Responsive Component

Author:
Ahita Bisma Adlula

1 year ago

1.5k
Responsive login form with image

Author:
Lukas Müller

3 years ago

15.7k
Modern Login Page
Dive into a world of cool animations and captivating visuals. This beautifully crafted interface is not only eye-catching but also highly functional. You can use it as-is or customize it to make it your own. Share your ideas, and let’s create something extraordinary together!” Feel free to tweak it further or add any specific details you’d like. 😊🎨

Author:
AyDin VM

2 years ago

8.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components