Facebook Login Page UI Clone in HTML and Tailwind CSS
Tags: webdev, html, beginners, tailwindcss
Published: 2024-03-05 12:02:48

### Introduction:

Certainly! Here's an updated description for your Facebook login page UI clone using HTML and Tailwind CSS:

In the realm of web development, honing your skills often involves crafting replicas of well-known websites. Among the internet giants, Facebook stands out for its ubiquity and user engagement. In this tutorial, we'll guide you through the steps of crafting a replica of the Facebook login page using HTML for the structure and Tailwind CSS for a sleek and responsive design. Uncover the intricacies of mimicking Facebook's user interface, and enhance your proficiency in web development through this hands-on project.

Prerequisites:

Before we start, make sure you have the following installed:

1. Code editor (e.g., Visual Studio Code, Sublime Text)
2. Browser (e.g., Chrome, Firefox)
3. Node.js and npm (for installing Tailwind CSS)

Let's get started:

### Step 1: Install Nodejs

Before we proceed with the Facebook Clone project using HTML and Tailwind CSS, let's ensure that you have Node.js installed on your system. Node.js is required for installing and managing packages, including Tailwind CSS. Follow these steps to install Node.js:

**i) Download Node.js:**
   Visit the official Node.js website: [Node.js Downloads](https://nodejs.org/en/download/)

**ii) Choose the Appropriate Version:**
   Select the version that corresponds to your operating system. The website usually recommends the LTS (Long Term Support) version for most users.

**iii) Install Node.js:**
   Follow the installation instructions provided on the website for your specific operating system. The process is typically straightforward, involving accepting the license agreement and choosing the installation directory.

**iv) Verify Installation:**
   Open a terminal or command prompt and run the following commands to verify that Node.js and npm (Node Package Manager) are installed successfully:

```bash
node -v
```

```bash
npm -v
```

If installed correctly, these commands should display the installed Node.js and npm versions.

Now that you have Node.js installed, you can proceed with the Facebook Clone project using HTML and Tailwind CSS as outlined in the initial steps of the blog post. If you encounter any issues during installation, refer to the official Node.js documentation or seek help from the Node.js community.

Once Node.js is installed, continue with the remaining steps in the blog post to set up the project and create the Facebook Clone.

### Step 2: Set Up Your Project

To ensure a smooth setup for your project, follow these steps carefully:

**i) Create Project Structure:**
   Open your terminal and navigate to the desired location for your project. Create a new folder for your project and open it in your code editor. Inside this project folder, create another folder named `src`. This is where your source code will reside.

```bash
mkdir my-facebook-clone
cd my-facebook-clone
mkdir src
```

**ii) Create Files:**
   Inside the `src` folder, create two files: `index.html` for HTML content and `input.css` for your Tailwind CSS input.

```bash
cd src
touch index.html input.css
```

**iii) Initialize npm and Install Tailwind CSS:**
   Back in the root folder, initialize npm and install Tailwind CSS as development dependencies.

```bash
npm init -y
npm install -D tailwindcss
npx tailwindcss init
```

**iv) Configure tailwind.config.js:**
   Open the `tailwind.config.js` file created in your project root and replace its content with the following:

```js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"],
 theme: {
    extend: {},
  },
  plugins: [],
}
```

**v) Setup input.css in src folder:**
   Open the `input.css` file inside the `src` folder and paste the following content:

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

**vi) Watch for Changes:**
   Run the following command in your terminal to watch for changes in your CSS file and automatically generate the output:

```bash
npx tailwindcss -i ./src/input.css -o ./src/output.css --watch
```

**vii) Link CSS in index.html:**
   In your `index.html` file, link the generated `output.css`:

```html
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="src/output.css">
   <title>Facebook - log in or sign up</title>
</head>
<body>

   <!-- Your content goes here -->

</body>
</html>
```

With these steps completed, your project is set up and ready for building the Facebook Clone using HTML and Tailwind CSS.


### Step 3: Add Favicon and Title

In this step, we will incorporate the favicon and title for our web page. Specifically, we will use the Facebook favicon and set the title as "Facebook – log in or sign up"

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./output.css">
    <link rel="icon" type="image/icon" href="https://www.facebook.com/favicon.ico" />
    <title>Facebook - log in or sign up</title>
</head>
<body>

    <!-- Your content goes here -->

</body>
</html>
```

### Step 4: Create the HTML Structure and Add Styling to the Container

In this step, we'll build the foundational HTML structure to provide a framework for our design. Once the structure is in place, we'll seamlessly integrate CSS to enhance the visual appeal and achieve our desired look for the container. Follow along as we lay the groundwork for a polished and visually appealing web page.

```html
<div class="content">
    <div class="left">
        <img class="w-72" src="https://static.xx.fbcdn.net/rsrc.php/y1/r/4lCu2zih0ca.svg" alt="">
        <p class="desc">Facebook helps you connect and share with the people in
            your life.</p>
    </div>
    <div class="right">
        <input class="email" type="email" placeholder="Email address or phone number">
        <input class="password" type="password" placeholder="Password">
        <button class="btn-blue">Log
            In</button>
        <a href="#" class="forget">Forgotten password?</a>
        <hr>
        <button class="btn-green">Create
            New Account</button>
        <span class="desc"><span class="bold-desc">Create a Page</span> for a
            celebrity, brand or business.</span>
    </div>
</div>
```

### Step 5: Add Styling to the left container

Let's refine the styling of the left container to ensure a polished and visually appealing design in your index.html file:

```html
<div class="left -mt-28">
            <img class="w-72" src="https://static.xx.fbcdn.net/rsrc.php/y1/r/4lCu2zih0ca.svg" alt="">
            <p class="w-3/5 ml-6 -mt-2 font-normal text-3xl">Facebook helps you connect and share with the people in
                your life.</p>
</div>
```

### Step 6: Add Styling to the right container

```html
<div class="right flex-col my-32 max-w-[26rem] bg-white p-4 -ml-64 rounded-lg shadow-[0_3px_10px_rgb(0,0,0,0.2)]">
            <input class="text-lg mb-3 p-4 w-96 h-12 outline-blue-400 border-2 border-gray-200 rounded-md" type="email"
                placeholder="Email address or phone number">
            <input class="text-lg mb-3 p-4 w-96 h-12 outline-blue-400 border-2 border-gray-200 rounded-md"
                type="password" placeholder="Password">
            <button class="mb-4 w-96 bg-blue-500 hover:bg-blue-700 text-white text-xl font-bold h-12 rounded-md">Log
                In</button>
            <a href="#" class="mx-32 mb-4 text-sm tracking-tight text-blue-600 font-medium">Forgotten password?</a>
            <hr class="my-4">
            <button
                class="mt-4 mx-16 w-64 tracking-tight bg-green-500 hover:bg-green-700 text-white text-xl font-bold h-12 rounded-md">Create
                New Account</button>
            <span class="absolute -mx-96 my-32"><span class="font-bold cursor-pointer">Create a Page</span> for a
                celebrity, brand or business.</span>
</div>
```

### Step 7: Full HTML Code version

This includes the structure and styles for all the mentioned containers in your Facebook Clone project. Feel free to adjust or modify it based on your specific requirements.

```html
<!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="input.css">
    <link rel="icon" type="image/icon" href="https://www.facebook.com/favicon.ico" />
    <title>Facebook - log in or sign up</title>
</head>

<body class="bg-[#f0f2f5]">
    <div class=" content flex -ml-12 justify-center items-center relative">
        <div class="left -mt-28">
            <img class="w-72" src="https://static.xx.fbcdn.net/rsrc.php/y1/r/4lCu2zih0ca.svg" alt="">
            <p class="w-3/5 ml-6 -mt-2 font-normal text-3xl">Facebook helps you connect and share with the people in
                your life.</p>
        </div>
        <div class="right flex-col my-32 max-w-[26rem] bg-white p-4 -ml-64 rounded-lg shadow-[0_3px_10px_rgb(0,0,0,0.2)]">
            <input class="text-lg mb-3 p-4 w-96 h-12 outline-blue-400 border-2 border-gray-200 rounded-md" type="email"
                placeholder="Email address or phone number">
            <input class="text-lg mb-3 p-4 w-96 h-12 outline-blue-400 border-2 border-gray-200 rounded-md"
                type="password" placeholder="Password">
            <button class="mb-4 w-96 bg-blue-500 hover:bg-blue-700 text-white text-xl font-bold h-12 rounded-md">Log
                In</button>
            <a href="#" class="mx-32 mb-4 text-sm tracking-tight text-blue-600 font-medium">Forgotten password?</a>
            <hr class="my-4">
            <button
                class="mt-4 mx-16 w-64 tracking-tight bg-green-500 hover:bg-green-700 text-white text-xl font-bold h-12 rounded-md">Create
                New Account</button>
            <span class="absolute -mx-96 my-32"><span class="font-bold cursor-pointer">Create a Page</span> for a
                celebrity, brand or business.</span>
        </div>
    </div>
</body>

</html>
```

### Step 8: Enhance SEO with Semantic Tags (Optional)

In this step, consider boosting your website's search engine optimization by incorporating semantic tags. While optional, these tags can improve the overall visibility and accessibility of your content on search engines.

```html
<!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="input.css">
    <link rel="icon" type="image/icon" href="https://www.facebook.com/favicon.ico" />
    <title>Facebook - log in or sign up</title>
</head>

<body class="bg-[#f0f2f5]">

    <main>
        <section class="content flex -ml-12 justify-center items-center relative">
            <article class="left -mt-28">
                <img class="w-72" src="https://static.xx.fbcdn.net/rsrc.php/y1/r/4lCu2zih0ca.svg" alt="Facebook Logo">
                <p class="w-3/5 ml-6 -mt-2 font-normal text-3xl">Facebook helps you connect and share with the people in
                    your life.</p>
            </article>

            <aside
                class="right flex-col my-32 max-w-[26rem] bg-white p-4 -ml-64 rounded-lg shadow-[0_3px_10px_rgb(0,0,0,0.2)]">
                <form>
                    <label for="email" class="hidden">Email address or phone number</label>
                    <input id="email"
                        class="text-lg mb-3 p-4 w-96 h-12 outline-blue-400 border-2 border-gray-200 rounded-md"
                        type="email" placeholder="Email address or phone number">

                    <label for="password" class="hidden">Password</label>
                    <input id="password"
                        class="text-lg mb-3 p-4 w-96 h-12 outline-blue-400 border-2 border-gray-200 rounded-md"
                        type="password" placeholder="Password">

                    <button type="submit"
                        class="mb-4 w-96 bg-blue-500 hover:bg-blue-700 text-white text-xl font-bold h-12 rounded-md">Log
                        In</button>
                </form>

                <a href="#" class="mx-32 mb-4 text-sm tracking-tight text-blue-600 font-medium">Forgotten password?</a>
                <hr class="my-4">

                <button type="button"
                    class="mt-4 mx-16 w-64 tracking-tight bg-green-500 hover:bg-green-700 text-white text-xl font-bold h-12 rounded-md">Create
                    New Account</button>

                <span class="absolute -mx-96 my-32"><span class="font-bold cursor-pointer">Create a Page</span> for a
                    celebrity, brand or business.</span>
            </aside>
        </section>
    </main>

</body>

</html>
```

### Preview:

This image shows the final product we made in this blog

![Preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1dm5byfjmgnp75zdwxr6.png)

### Conclusion:

Building a Facebook UI clone using HTML and Tailwind CSS is a great way to practice front-end development skills. This tutorial provides a basic structure, but you can expand and enhance it to make your clone more realistic. Keep experimenting, and happy coding!