Create a Social Media Login Form using Tailwind CSS

Last Updated : 28 Feb, 2024

The social media login page allows users to log in using their email and password or through various social media platforms such as Facebook, Twitter, Google, and Instagram. Here we will create a social media login page using Tailwind CSS.

Screenshot-2024-02-24-115146

Prerequisites

Approach

HTML Structure: Defines the layout of the login form, including input fields and buttons.
Tailwind CSS: Provides utility classes for styling elements, such as colors, borders, padding, and margins.
JavaScript: Implements form validation to ensure both email and password fields are filled before submission.
Interactivity: Adds interactivity by handling form submission and displaying an alert upon successful submission or validation failure.

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>Social Media Login Form</title>
    <link href=
"https://cdn.jsdelivr.net/npm/font-awesome@5.15.1/css/all.min.css"
          rel="stylesheet">
    <link href=
"https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
          rel="stylesheet">
</head>
 
<body class="bg-gray-100 flex justify-center
 items-center h-screen">
    <div class="bg-green-300 border-2 border-green-500 
    rounded-lg shadow-md p-8 max-w-md w-full">
        <h1 class="text-green-600 text-3xl 
        text-center mb-4">GeeksforGeeks</h1>
        <h3 class="text-green-600 text-lg 
        font-semibold mb-4">Social Media Login</h3>
        <div class="mb-4">
            <input type="text" id="email" placeholder="Email"
                   class="w-full px-3 py-2 border border-gray-300
                 rounded-md focus:outline-none focus:ring
                  focus:border-green-500" autocomplete="off" required>
        </div>
        <div class="mb-4">
            <input type="password" id="password"
                   placeholder="Password"
                   class="w-full px-3 py-2 border border-gray-300 
                rounded-md focus:outline-none focus:ring 
                focus:border-green-500" autocomplete="off" required>
        </div>
        <button onclick="submitForm()"
                class="w-full bg-blue-500 hover:bg-blue-600
             text-white px-4 py-2 rounded-md">Login</button>
        <div class="mt-4 space-y-2">
            <button class="w-full bg-blue-900 hover:bg-blue-800 
                text-white px-4 py-2 rounded-md flex items-center
                 justify-center">
                <i class="fab fa-facebook-f mr-2"></i> Login with Facebook
            </button>
            <button class="w-full bg-blue-400 hover:bg-blue-300 
                text-white px-4 py-2 rounded-md flex items-center
                 justify-center">
                <i class="fab fa-twitter mr-2"></i> 
                  Login with Twitter
            </button>
            <button class="w-full bg-red-600 hover:bg-red-500
                 text-white px-4 py-2 rounded-md flex items-center 
                 justify-center">
                <i class="fab fa-google mr-2"></i> 
                  Login with Google
            </button>
            <button class="w-full bg-pink-500 hover:bg-pink-400
                 text-white px-4 py-2 rounded-md flex items-center
                  justify-center">
                <i class="fab fa-instagram mr-2"></i> 
                  Login with Instagram
            </button>
        </div>
    </div>
 
    <script>
        function submitForm() {
            const email = document.getElementById('email').value;
            const password = document.getElementById('password').value;
 
            if (!email || !password) {
                alert('Please fill in both email and password fields.');
                return;
            }
 
            window.alert('The form is submitted');
 
            document.getElementById('email').value = '';
            document.getElementById('password').value = '';
        } 
    </script>
</body>
 
</html>