Twitter Login Clone Using React Js | Sign In Page Design With React Js

we will guide you through the process of designing a stunning Twitter Login Clone using react js. You'll learn the best practices for creating a user-friendly and responsive login page, as well as how to implement essential design elements to make your login page stand out.. We will learn In a very easy way to understand How To Make Login Page Like Twitter Using React Js | Sign In Page Design With React Js.

The goal of this tutorial is to introduce developers to the React.js library.The reader should be familiar with the fundamental web development technologies, such as:

Basics for HTML and CSS

Javascript

Basics of React.js in ES6

What we will Learn

Here we will learn how to design a Twitter login clone using react. we will learn to code a simple Twitter login clone using the React.js library. The workflow of the app is the same as the previous blog.If you have not read that blog kindly follow the link .

Popular article: Counter app using react js

Source Link : Link

APP.JS

import "./App.css";

function App() {
  return (
    <div className="logo-box">
      <img src="./logo.png" alt="apple" className="logo" />
      <h2>Sign In to Twitter</h2>
      <button>
        <img src="./google.png" alt="apple" />
        Sign in with Google
      </button>
      <button>
        <img src="./apple.png" alt="apple" />
        Sign in with Google
      </button>
      <hr></hr>
      <span>Or</span>
      <form>
        <input type="text" placeholder="Phone email or username" />
        <button>Next</button>
      </form>
      <button>Forget Password</button>
      <p>
        Don't Have an account<a>Sign up</a>
      </p>
    </div>
  );
}

export default App;

App.css

* {
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
  box-sizing: border-box;
}

body {
  background: #3e65fe;
}

.logo-box {
  background: #fff;
  padding: 30px 120px;
  width: 550px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  border-radius: 10px;
}

.logo {
  width: 30px;
  margin-bottom: 20px;
}
.logo-box h2 {
  margin-bottom: 20px;
}

.logo-box button img {
  width: 18px;
  margin-right: 10px;
}

.logo-box button {
  width: 100%;
  padding: 10px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px 0px;
  border-radius: 30px;
  background: transparent;
  border: 1px solid #999;
  font-weight: 500;
  cursor: pointer;
}

.logo-box hr {
  border: 0;
  height: 1px;
  background: #c2c2c2;
  margin: 5px;
}

.logo-box span {
  display: block;
  width: 40px;
  margin: auto;
  background: #fff;
  font-size: 14px;
  margin-top: -16px;
}
.logo-box input {
  width: 100%;
  background: transparent;
  border: 1px solid #999;
  outline: 0;
  padding: 15px 10px;
  border-radius: 4px;
}
::placeholder {
  font-weight: 500;
  color: #333;
}

.logo-box form button {
  background: #000;
  color: #fff;
  border: 0;
  margin-bottom: 15px;
}

.logo-box p {
  /* text-align: left; */
  font-size: 14px;
  color: #555;
  margin: 40px 0 50px;
}

.login-box p a {
  text-decoration: none;
  color: #359cf0;
  margin-left: 100px;
}

GitHub

You can always refer to the GitHub repository to clone the project we have created.

1.https://github.com/tinkugupta5/Counter_app