Ad Code

Facebook Login Page Clone Using Tailwind CSS | Web Development.

Anonymous April 23, 2022

 Facebook Login Clone

In this tutorial, we will learn to create a Facebook login clone using HTML, CSS, and the Tailwind framework. Facebook is one of the most popular social media platforms in the world, and its login page is a well-known design. Creating a clone of the Facebook login page is an interesting challenge for web developers.

To create this clone, we will use HTML to structure the page, CSS to style it, and the Tailwind framework to simplify the CSS coding. Tailwind provides a set of pre-designed styles that we can easily apply to our HTML elements. This makes it easier to create complex designs without writing too much CSS code.

We will begin by creating a basic HTML structure for the login page. Then we will use the Tailwind classes to style the page according to the Facebook login page. We will add a logo, input fields, and buttons to create a complete login form. Finally, we will add some JavaScript code to handle the form submission.

By the end of this tutorial, you will have a good understanding of HTML, CSS, and Tailwind framework. You will also have a Facebook login clone that you can use for practice or as a portfolio project.

Following is the actual Facebook login page:

- Original Facebook Login Page


And we will make it the same using the tailwind framework.

Firstly you need to use and know about the Tailwind CSS framework

Tailwind CSS is a framework of CSS, it is a utility-class framework used for building custom user interfaces.

You can see the documentary of Tailwind CSS.

Let's write the code:

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <link rel="stylesheet" href="style.css"> -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="icon" type="image/png" href="./favicon.svg" />
    <title>Facebook – log in or sign up</title>
</head>
<body class="bg-slate-200">
    <div class="container mx-auto flex items-center justify-center">
        <div class="left mx-10 w-1/3 mt-32">
            <img class="w-auto h-48" src="./fblogo.svg" alt="">
            <p class="text-xl mx-8 ">Facebook helps you connect and share with the people in your life.</p>

        </div>
        <div class="right mt-44 flex flex-col bg-white p-8 rounded-xl w-1/4 text-xl shadow-lg">
            <input class="px-4 py-2 my-2 rounded-md border border-1 outline-blue-500 border-gray-400" type="text" placeholder="Email address or phone number">
            <input class="px-4 py-2 my-2 rounded-md border border-1 outline-blue-500 border-gray-400" type="password" placeholder="Password">
            <button class="px-4 py-2 my-2 rounded-md bg-blue-600 text-white font-semibold hover:bg-blue-700">Log In</button>
            <span class="text-blue-600 hover:underline text-center my-2 cursor-pointer text-sm">Forgotten password?</span>
            <hr class="my-2">
            <button class="px-4 py-2 my-2 rounded-md bg-green-600 text-white font-semibold hover:bg-green-700 w-fit mx-auto text-lg">Create New Account</button>
            <span class="absolute bottom-40 text-sm"><span class="font-bold hover:underline cursor-pointer">Create a Page </span>
                for a celebrity,brand or business.</span><br>
        </div>
    </div>
</body>
</html>




Output:




Supported Browsers:

  • Chrome
  • Safari
  • Firefox
  • Microsoft Edge
  • Opera

Post a Comment

0 Comments

Ad Code