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

Responsive login form with image

Anonymous

2 years ago

2.2k
Full page sign-In form

Anonymous

2 years ago

4.3k
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

2k
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. 😊🎨

Anonymous

2 years ago

3.7k
Responsive registration form
form with social login buttons

Sophia Baker

3 years ago

46.7k
3D Login form
Made a responsive and the 3d animative

Sufyan jutt

8 months ago

661
login form
You can use this login when you want to log in to a specific website such as Facebook, Instagram, etc.

Nishimwe Jeanine

1 year ago

1.2k
Responsive Registration Page
I created a responsive and visually appealing registration page using TailwindCSS and HTML5. This page features a gradient background, a modern card-style form, and clear input fields for username, email, password, and password confirmation. It includes client-side validation with real-time error messages to ensure all required fields are filled correctly and passwords match. This form is designed to provide a seamless user experience across all devices.

zobaidul kaziex

2 years ago

3.8k
Sign In page CezeriLab

Sedat Kumcu

1 year ago

1.7k
Responsive eCommerce Sidebar Layout with Hamburger Menu | Tailwind CSS UI for Online Stores
Build a clean and responsive eCommerce sidebar layout with a smooth hamburger menu using Tailwind CSS and Alpine.js. Ideal for devotional, spiritual, or modern online stores. Includes dark mode support, navigation links, cart, login, and a dynamic layout for beautiful product pages.

Rajesh Pandey

1 year ago

1.5k
Tailwind login page

Kofi Osei

3 years ago

11.2k
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

2 months ago

376