Tailwind CSS Login Form

Last Updated : 27 Feb, 2024

Login forms in Tailwind CSS are sections of a document on websites that are used for user authentication, web security, accessibility, and to gain access to restricted areas. A typical login form consists of two input fields, i.e., one for the user’s username and the other for their password. It also includes a submit button that, when clicked, sends the user’s credentials to the server for verification. If the credentials are valid, the user is granted access to the site. Otherwise, they are presented with an error message and prompted to try again.

Prerequisites

Approach

Set up the HTML document:
- Start with a basic HTML document structure:
- Open a code editor and create a new file.
- Add the <!DOCTYPE html> declaration, <html>, <head>, and <body> tags.
Create the Form Element:
- Within the <body> tag, add a <form> element.
- Set the action attribute to the URL where the form data will be sent (usually to a server-side script).
- Set the method attribute to “POST” to send the data securely.
Add Input Fields:
- Inside the <form> element, create input fields for username and password:
- Use the <input> tag with the type attribute set to “text” for username.
- Use the <input> tag with the type attribute set to “password” for the password.
- Add clear labels for each input field using the <label> tag.
Include a Submit Button:
- Add a submit button using the <button> tag with the type attribute set to “submit“.
- Give the button a clear label describing its action, like “Login” or “Submit“.
Optional: Add Additional Features:
- Include a “Remember Me” checkbox using the <input> tag with the type attribute set to “checkbox“.
- Add a link to the “Forgot Password” page using the <a> tag.
- Add styling using CSS for a more appealing look.
Close the Form and Document:
- Close the <form> tag.
- Add the closing </body> and </html> tags to complete the document.

Example: This example shows the implementation of the above-explained approach.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>GeeksforGeeks Registration</title>
    <link href=
"https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
          rel="stylesheet">
</head>
 
<body class="flex items-center justify-center
              min-h-screen bg-gray-200">
    <div class="main bg-white rounded-lg shadow-md p-10 
    transition-transform w-96 text-center">
        <h1 class="text-green-600 text-3xl">
              GeeksforGeeks
          </h1>
        <h3 class="text-lg">
              Enter your login credentials
          </h3>
        <form action="">
            <label for="first" class="block mt-4 mb-2 text-lef
            t text-gray-700 font-bold">Username:</label>
            <input type="text" id="first" name="first"
                   placeholder="Enter your Username"
                   class="block w-full mb-6 px-4 py-2 border border
                -gray-300 rounded-md focus:outline-none
                 focus:border-green-400" required>
 
            <label for="password" class="block mb-2 text-left
             text-gray-700 font-bold">Password:</label>
            <input type="password" id="password" name="password"
                   placeholder="Enter your Password"
                   class="block w-full mb-6 px-4 py-2 border 
                border-gray-300 rounded-md focus:outline-none
                 focus:border-green-400" required>
 
            <div class="flex justify-center items-center">
                <button type="submit"
                        class="bg-green-600 text-white py-3 px-6 rounded
                    -md cursor-pointer transition-colors 
                    duration-300 hover:bg-green-500">
                    Submit
                </button>
            </div>
        </form>
        <p class="mt-4">Not registered?
            <a href="#" class="text-blue-500 
            hover:underline">Create an account</a>
        </p>
    </div>
</body>
 
</html>