Create Twitter Login Page using Tailwind & jQuery

Last Updated : 26 Feb, 2024

We will see How To Make a Twitter Login Page Using TailwindCSS and jQuery. The code produces an attractive login page with a design similar to the Twitter login interface. The jQuery incorporates straightforward validation for the email input field upon submitting the form.

Prerequisites

Approach

The HTML code outlines a basic login form structure using Tailwind CSS for styling. It comprises a main container div wrapped in a main-signin class, housing the form elements. The form includes a heading, Google and Apple sign-in buttons, horizontal lines, and an input field for email/username. Tailwind CSS classes are applied for layout, padding, and border-radius. Input styling includes default and focus states. Links are styled with colors and hover effects. JavaScript, leveraging jQuery, handles form validation, ensuring the email input field contains at least five characters without spaces. This succinct, visually appealing layout enhances user interaction and readability while promoting easy login.

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

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,
                                   initial-scale=1.0">
    <title>Twitter Login Page Like</title>
    <!-- Tailwind CSS -->
    <link href=
"https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
 
<body class="bg-gray-300 flex justify-center items-center h-screen">
    <div class="bg-white p-8 rounded-lg w-96">
        <div class="close flex justify-end text-gray-500 
                    cursor-pointer">×</div>
        <h1 class="text-center font-semibold text-xl mb-8">GeeksforGeeks</h1>
        <div class="space-y-8">
            <div>
                <h1 class="text-center font-semibold text-lg">Sign in to</h1>
                <div class="flex justify-center items-center mt-4">
                    <h1 class="text-lg font-semibold mr-2">X</h1>
                </div>
            </div>
            <div>
                <button class="w-full bg-blue-500 text-white 
                rounded-full py-3 font-semibold mb-3">Sign in with
                    Google</button>
                <button class="w-full bg-black text-white
                 rounded-full py-3 font-semibold">Sign in with Apple</button>
            </div>
            <form id="formid">
                <div class="space-y-4">
                    <input type="email" name="email" id="emailid"
                           placeholder="Phone, email, or username"
                           class="w-full border border-gray-300 rounded-md 
                        py-3 px-4 focus:outline-none focus:border-blue-500">
                    <div class="flex justify-between items-center">
                        <button type="submit" class="w-1/2 bg-black
                         text-white rounded-full py-3 font-semibold">
                            Next
                        </button>
                        <a href="#" class="text-gray-500">Forget Password ?</a>
                    </div>
                </div>
            </form>
            <div class="flex justify-center items-center">
                <p class="text-gray-500 mr-1">Don't have an account ?</p>
                <a href="#" class="text-blue-500">Sign Up</a>
            </div>
        </div>
    </div>
 
    <!-- jQuery -->
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        // jQuery script
        $(document).ready(function () {
            $('#formid').submit(function (e) {
                e.preventDefault();
                let username = $('#emailid').val();
                if (username.length < 5 || username.includes(" ")) {
                    alert("Please enter a valid email");
                }
            });
            $('.close').click(function () {
                $('.container').hide();
            });
        });
    </script>
</body>
 
</html>