Crafting a Stunning Login Form with Tailwind CSS and Enhanced User-Friendly Validation

Ayyaz

Ayyaz

@AyyazTech

Website Development
Crafting a Stunning Login Form with Tailwind CSS and Enhanced User-Friendly Validation

Introduction

Developing an intuitive and visually pleasing login form is an essential aspect of user experience design. Today, we'll dive into creating an eye-catching login form using Tailwind CSS, complete with enhanced JavaScript-based form validation to ensure user-friendliness.

Prerequisites

Before you start, you'll need to have the Tailwind CSS framework installed in your project. If you're new to Tailwind, make sure to check out our previous tutorials for a comprehensive guide on how to get started.

Getting Started

Once you've installed Tailwind CSS, run the following command in your terminal to watch for any changes in your input.css file:

npm run watch
1npm run watch

This will actively compile your CSS files into an output.css file within the dist folder.

Basic Layout & Styling

Setting the Scene

To set the stage, let's create a light grey background. You can do this easily with the bg-gray-300 class.

Designing the Form Card

Next, you'll build a card to house your login form. Aim for a clean, rounded design with a white background and a drop shadow. We'll set the width at 450px and let the height adjust automatically. The Tailwind CSS code for the card will look like this:

<div class="bg-white rounded-lg shadow-lg w-[450px] h-auto">
1<div class="bg-white rounded-lg shadow-lg w-[450px] h-auto">

Remember to add flex justify-center items-center h-screen to your body element to center this card on the screen.

Input Fields: The Username and Password

Username Field

For the username, you'll need a label and an input element. Add appropriate padding and a bold label. Make sure the input field stretches across the entire width of the card:

<label class="block font-bold mb-2">Username</label>
<input type="text" id="username" class="block w-full p-3 border rounded">
1<label class="block font-bold mb-2">Username</label> 2<input type="text" id="username" class="block w-full p-3 border rounded">

Password Field

Follow the same pattern for the password input field, setting the input type to password:

<label class="block font-bold mb-2">Password</label>
<input type="password" id="password" class="block w-full p-3 border rounded">
1<label class="block font-bold mb-2">Password</label> 2<input type="password" id="password" class="block w-full p-3 border rounded">

Crafting a Beautiful Blue Sign-In Button

For an elegant touch, let's create a beautiful blue button that changes shade when hovered over. With Tailwind CSS, you can achieve this like so:

<button type="button" onclick="submitForm()" class="px-5 py-2 mt-4 rounded bg-blue-500 hover:bg-blue-600 text-white">
  Sign In
</button>
1<button type="button" onclick="submitForm()" class="px-5 py-2 mt-4 rounded bg-blue-500 hover:bg-blue-600 text-white"> 2 Sign In 3</button>

User-Friendly Form Validation with JavaScript

Now let's implement user-friendly form validation using JavaScript. In this example, the form checks for empty fields and provides real-time feedback.

Here's how the validation script would look:

function validateForm() {
  const username = document.getElementById('username');
  const password = document.getElementById('password');
  let isValid = true;

  if (!username.value.trim()) {
    username.classList.add('border-red-500');
    isValid = false;
  } else {
    username.classList.remove('border-red-500');
  }

  if (!password.value.trim()) {
    password.classList.add('border-red-500');
    isValid = false;
  } else {
    password.classList.remove('border-red-500');
  }

  return isValid;
}

function submitForm() {
  if (validateForm()) {
    alert('Form is valid. Logging you in...');
  } else {
    alert('Please fill in all the fields.');
  }
}
1function validateForm() { 2 const username = document.getElementById('username'); 3 const password = document.getElementById('password'); 4 let isValid = true; 5 6 if (!username.value.trim()) { 7 username.classList.add('border-red-500'); 8 isValid = false; 9 } else { 10 username.classList.remove('border-red-500'); 11 } 12 13 if (!password.value.trim()) { 14 password.classList.add('border-red-500'); 15 isValid = false; 16 } else { 17 password.classList.remove('border-red-500'); 18 } 19 20 return isValid; 21} 22 23function submitForm() { 24 if (validateForm()) { 25 alert('Form is valid. Logging you in...'); 26 } else { 27 alert('Please fill in all the fields.'); 28 } 29}

The Complete Code for Quick Copy-Pasting

Here's the entire code snippet that combines all the elements:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Login Form</title>
  <link href="./output.css" rel="stylesheet">
</head>
<body class="bg-gray-300 flex justify-center items-center h-screen">
  <div class="bg-white rounded-lg shadow-lg w-[450px] h-auto p-6">
    <form>
      <label for="username" class="block font-bold mb-2">Username</label>
      <input id="username" type="text" class="block w-full p-3 border rounded">

      <label for="password" class="block font-bold mb-2">Password</label>
      <input id="password" type="password" class="block w-full p-3 border rounded">

      <button type="button" onclick="submitForm()" class="px-5 py-2 mt-4 rounded bg-blue-500 hover:bg-blue-600 text-white">
        Sign In
      </button>
    </form>
    <a href="#" class="text-blue-500 font-bold mt-2 inline-block text-right w-full">
      Forgot Password?
    </a>
  </div>
  <script>
    function validateForm() {
      const username = document.getElementById('username');
      const password = document.getElementById('password');
      let isValid = true;

      if (!username.value.trim()) {
        username.classList.add('border-red-500');
        isValid = false;
      } else {
        username.classList.remove('border-red-500');
      }

      if (!password.value.trim()) {
        password.classList.add('border-red-500');
        isValid = false;
      } else {
        password.classList.remove('border-red-500');
      }

      return isValid;
    }

    function submitForm() {
      if (validateForm()) {
        alert('Form is valid. Logging you in...');
      } else {
        alert('Please fill in all the fields.');
      }
    }
  </script>
</body>
</html>
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <title>Login Form</title> 6 <link href="./output.css" rel="stylesheet"> 7</head> 8<body class="bg-gray-300 flex justify-center items-center h-screen"> 9 <div class="bg-white rounded-lg shadow-lg w-[450px] h-auto p-6"> 10 <form> 11 <label for="username" class="block font-bold mb-2">Username</label> 12 <input id="username" type="text" class="block w-full p-3 border rounded"> 13 14 <label for="password" class="block font-bold mb-2">Password</label> 15 <input id="password" type="password" class="block w-full p-3 border rounded"> 16 17 <button type="button" onclick="submitForm()" class="px-5 py-2 mt-4 rounded bg-blue-500 hover:bg-blue-600 text-white"> 18 Sign In 19 </button> 20 </form> 21 <a href="#" class="text-blue-500 font-bold mt-2 inline-block text-right w-full"> 22 Forgot Password? 23 </a> 24 </div> 25 <script> 26 function validateForm() { 27 const username = document.getElementById('username'); 28 const password = document.getElementById('password'); 29 let isValid = true; 30 31 if (!username.value.trim()) { 32 username.classList.add('border-red-500'); 33 isValid = false; 34 } else { 35 username.classList.remove('border-red-500'); 36 } 37 38 if (!password.value.trim()) { 39 password.classList.add('border-red-500'); 40 isValid = false; 41 } else { 42 password.classList.remove('border-red-500'); 43 } 44 45 return isValid; 46 } 47 48 function submitForm() { 49 if (validateForm()) { 50 alert('Form is valid. Logging you in...'); 51 } else { 52 alert('Please fill in all the fields.'); 53 } 54 } 55 </script> 56</body> 57</html>

Conclusion

Tailwind CSS provides a streamlined approach for crafting visually appealing and functional user interfaces. We’ve explored how to create a beautiful login form complete with user-friendly, real-time form validation. Feel free to use this template as a starting point and further customize it to match your specific needs. Happy coding!

How to
Video Tutorials
Tailwind CSS