Published on

6 Easy Ways To Make A Login And Register Form With Error Message With Tailwind CSS

Tags
FormsLogins
Login And Register Form With Error Message

As a FrontEnd technology blogger, it is important to stay up-to-date with the latest trends and tools in the industry. One such tool that has gained popularity in recent times is Tailwind CSS. In this article, we will explore how to create a Login and Register Form with Error Message using Tailwind CSS.

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that allows developers to quickly build custom user interfaces. It provides a set of pre-defined classes that can be used to style HTML elements. With Tailwind CSS, you can create complex layouts and designs without having to write custom CSS.

The description of Login And Register Form With Error Message ui component

A Login and Register Form with Error Message is a common UI component that is used in many web applications. It consists of a form where users can enter their login credentials or register for a new account. If there is an error in the form, an error message is displayed to the user.

Why use Tailwind CSS to create a Login And Register Form With Error Message ui component?

Tailwind CSS provides a set of pre-defined classes that can be used to style HTML elements. This makes it easy to create a Login and Register Form with Error Message without having to write custom CSS. Additionally, Tailwind CSS is highly customizable, which means that you can easily modify the styles to match your application's branding.

The preview of Login And Register Form With Error Message ui component.

To create a Login and Register Form with Error Message using Tailwind CSS, we will use the following HTML structure:

<div class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4 flex flex-col">
  <div class="mb-4">
    <label class="block text-grey-darker text-sm font-bold mb-2" for="username">
      Username
    </label>
    <input
      class="shadow appearance-none border rounded w-full py-2 px-3 text-grey-darker"
      id="username"
      type="text"
      placeholder="Username"
    />
  </div>
  <div class="mb-6">
    <label class="block text-grey-darker text-sm font-bold mb-2" for="password">
      Password
    </label>
    <input
      class="shadow appearance-none border rounded w-full py-2 px-3 text-grey-darker mb-3"
      id="password"
      type="password"
      placeholder="**********"
    />
    <p class="text-red text-xs italic">Please choose a password.</p>
  </div>
  <div class="flex items-center justify-between">
    <button
      class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded"
      type="button"
    >
      Sign In
    </button>
    <a class="inline-block align-baseline font-bold text-sm text-blue hover:text-blue-darker" href="#">
      Forgot Password?
    </a>
  </div>
</div>

Free download of the Login And Register Form With Error Message's source code

The source code of Login And Register Form With Error Message ui component.

To add error messages to the form, we can use the following HTML structure:

<div class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4 flex flex-col">
  <div class="mb-4">
    <label class="block text-grey-darker text-sm font-bold mb-2" for="username">
      Username
    </label>
    <input
      class="shadow appearance-none border {{usernameError ? 'border-red' : ''}} rounded w-full py-2 px-3 text-grey-darker"
      id="username"
      type="text"
      placeholder="Username"
    />
    {{usernameError && <p class="text-red text-xs italic">{{usernameError}}</p>}}
  </div>
  <div class="mb-6">
    <label class="block text-grey-darker text-sm font-bold mb-2" for="password">
      Password
    </label>
    <input
      class="shadow appearance-none border {{passwordError ? 'border-red' : ''}} rounded w-full py-2 px-3 text-grey-darker mb-3"
      id="password"
      type="password"
      placeholder="**********"
    />
    {{passwordError && <p class="text-red text-xs italic">{{passwordError}}</p>}}
  </div>
  <div class="flex items-center justify-between">
    <button
      class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded"
      type="button"
    >
      Sign In
    </button>
    <a class="inline-block align-baseline font-bold text-sm text-blue hover:text-blue-darker" href="#">
      Forgot Password?
    </a>
  </div>
</div>

<style>
    body {background:white !important;}
</style>
<div class="main w-max m-auto mt-10">
  <div class="login">
      <h2 class="text-2xl mb-6">Login</h2>
      <div class="username flex border rounded text-gray-500 mb-4">
        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 mx-2 my-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" /></svg>
        <input class="outline-none px-2 h-full py-2 text-lg" type="text" placeholder="username" />
      </div>

      <div class="password flex border rounded text-gray-500 mb-4">
        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 mx-2 my-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" /></svg>
        <input class="outline-none px-2 h-full py-2 text-lg" type="password" placeholder="password" />
      </div>

      <div class="show_info text-sm mb-4 w-max text-red-400"></div>

      <div class="submit border rounded mb-4 bg-blue-600 text-white cursor-pointer">
        <div class="wrapper flex w-max mx-auto">
          <svg xmlns="http://www.w3.org/2000/svg" class="w-5 my-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 11l3-3m0 0l3 3m-3-3v8m0-13a9 9 0 110 18 9 9 0 010-18z" /></svg>
          <input class="outline-none px-2 h-full cursor-pointer py-2 text-lg bg-transparent" type="button" value="Login" />
        </div>
      </div>    
  </div>
  <div class="register">
      <h2 class="text-2xl mb-6">Register</h2>
      <div class="display_name flex border rounded text-gray-500 mb-4">
        <input class="outline-none px-4 h-full py-2 text-lg" type="text" placeholder="display name" />
      </div>

      <div class="username flex border rounded text-gray-500 mb-4">
        <input class="outline-none px-4 h-full py-2 text-lg" type="text" placeholder="username" />
      </div>

      <div class="password flex border rounded text-gray-500 mb-4">
        <input class="outline-none px-4 h-full py-2 text-lg" type="password" placeholder="password" />
      </div>

      <div class="gender flex border rounded text-gray-500 mb-4">
      <div class="title m-2 ml-4">Gender</div>
       <label class="flex items-center cursor-pointer m-2">
         <input class="scale-125 mr-2 cursor-pointer" type="radio" name="gender" value="m" checked>
         <div class="title -mt-1">male</div>
       </label>
       
       <label class="flex items-center cursor-pointer m-2">
         <input class="scale-125 mr-2 cursor-pointer" type="radio" name="gender" value="f">
         <div class="title -mt-1">female</div>
       </label>
      </div>
      <div class="show_info text-sm mb-4 w-max text-red-400">username already taken</div>
      <div class="submit border rounded mb-4 bg-blue-600 text-white cursor-pointer">
        <div class="wrapper flex w-max mx-auto">
          <svg xmlns="http://www.w3.org/2000/svg" class="w-5 my-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z" /></svg>
          <input class="outline-none px-2 h-full cursor-pointer py-2 text-lg bg-transparent" type="button" value="Register" />
        </div>
      </div>
  </div>
</div>

How to create a Login And Register Form With Error Message with Tailwind CSS?

To create a Login and Register Form with Error Message using Tailwind CSS, follow these steps:

  1. Create a new HTML file and add the above HTML structure.
  2. Add the Tailwind CSS stylesheet to your HTML file.
  3. To add error messages to the form, add the above HTML structure to your HTML file.
  4. Use JavaScript to add functionality to the form.

Conclusion

In this article, we explored how to create a Login and Register Form with Error Message using Tailwind CSS. We learned that Tailwind CSS provides a set of pre-defined classes that can be used to style HTML elements, making it easy to create complex layouts and designs without having to write custom CSS. Additionally, Tailwind CSS is highly customizable, which means that you can easily modify the styles to match your application's branding.