How to Create Responsive Login Form using Only React Js

Recently i had to create a login page for one of my project and i thought that it could also a good tutorial so in this post we are going to create this Login component using react js .

Login form is basically used to validate the user before jumping to any routes . Login form have two inputs boxes one is used for email address and another used for password. By entering these fields user is verified and then user able to jump to another page.

Prerequisites:

NPM & Node js

React Js

Before starting this project these are the packages you have to install and download the assets.

Steps to create React Application And Installing Module:

Step 1: Create a React application using the following command:

npx  create-react-app  projectname

cd projectname

Step 2: To run the application:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Folder & file structure of react js application

First, we will install our react application boilerplate so that we can start. Below I have mentioned the folder structure for our application.

What you learn through this article

How to make login page using React js .

How to make login page responsive .

Now lets start with app.js where we will write all the jsx for login page.

App.js

import React from 'react'

const App = () => {
  return (
    <div className="container">
      <div className="wrapper">

        <div className="title">
          <span>Welcome back</span>
        </div>
        <p className='title_para'>Please enter your details to sign in.</p>

        <form action="#">
          <div className="row">
            {/* <i className="fas fa-user"></i> */}
            <input type="text" placeholder="Enter your email..." required />
          </div>
          <div className="row">
            {/* <i className="fas fa-lock"></i> */}
            <input type="password" placeholder="Password" required />
          </div>
          <div className="pass"><a href="#">Forgot password?</a></div>
          <div className="row button">
            <input type="submit" value="Login" />
          </div>
          <div className="signup-link">Not a member? <a href="#">Signup now</a></div>
        </form>
      </div>
    </div>
  )
}

export default App

Now lets jump into css part where we write react js and css .

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

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

body {
  background: #F2EFEF;
  overflow: hidden;
}

::selection {
  background: rgba(26, 188, 156, 0.3);
}

.container {
  max-width: 440px;
  padding: 0 20px;
  margin: 170px auto;
}

.wrapper {
  width: 100%;
  background: #fff;
  border-radius: 5px;
  /* box-shadow: 0px 4px 10px 1px rgba(0, 0, 0, 0.1); */
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.wrapper .title {
  height: 90px;
  background: #ffffff;
  border-radius: 5px 5px 0 0;
  color: #151515;
  font-size: 25px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.title_para {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  bottom: 22px;
  color: #7e7e7e;
}

.wrapper form {
  padding: 10px 25px 34px 25px;
}

.wrapper form .row {
  height: 56px;
  margin-bottom: 15px;
  position: relative;
}

.wrapper form .row input {
  height: 100%;
  width: 100%;
  outline: none;
  padding-left: 20px;
  border-radius: 5px;
  border: 1px solid lightgrey;
  font-size: 16px;
  transition: all 0.3s ease;
}

form .row input:focus {
  border-color: #16a085;
  box-shadow: inset 0px 0px 2px 2px rgba(26, 188, 156, 0.25);
}

form .row input::placeholder {
  color: #999;
}

.wrapper form .row i {
  position: absolute;
  width: 47px;
  height: 100%;
  color: #fff;
  font-size: 18px;
  background: #16a085;
  border: 1px solid #16a085;
  border-radius: 5px 0 0 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wrapper form .pass {
  margin: 4px 4px 23px 4px;
}

.wrapper form .pass a {
  color: #16a085;
  font-size: 17px;
  text-decoration: none;
}

.wrapper form .pass a:hover {
  text-decoration: underline;
}

.wrapper form .button input {
  color: #fff;
  font-size: 20px;
  font-weight: 500;
  padding-left: 0px;
  background: #242526;
  border: 1px solid #141414;
  cursor: pointer;
}

form .button input:hover {
  background: #090909;
}

.wrapper form .signup-link {
  text-align: center;
  margin-top: 25px;
  /* font-size: 17px; */
  padding-right: 20px;
}

.wrapper form .signup-link a {
  color: #16a085;
  text-decoration: none;
}

form .signup-link a:hover {
  text-decoration: underline;
}

If you face any difficulties while creating your responsive Login page . Or form is not working as you expected you can watch the whole tutorial and source code file you can download for this responsive Login page for free by clicking on the download button.

Conclusion

I hope this tutorial was helpful. Please leave a comment with any recommendations for other applications. I’m hoping you’ll create this application effectively and get a lot of knowledge from it. We designed this project as a beginner project, but in the future days we will cover more advanced projects as well.

People are also reading: