Create a beginner-level project Minimal Simple Login form Design from Figma to React JS code

Hey guy Hope you are doing well in todays blog we are making simple login page which we follow the figma design to design this login page and we design whole design in react js.
ReactJS code to create a simple login form

Assets Link : Click Here

These Are the topics which we are cover in this Simple Login design.
How to style and use Reacts to Centre this form
How can the design be responsive?
how to make the input box interactive with material UI.
How to make the screen of this login form responsive.

Basic Setup: Launch PowerShell or your IDE's terminal and type the following command to start a new project using create-react-app:

The name of your project is currently "login," but you can change it to something else, like "my-first-react-website" for the time being.

npx create-react-app login

Install Mui as well because we need to use its input boxes in order to install this package. or you can go to the official mui website.

Installation of Mui: Click Here

Also, we are using sass for styling in this project. So we have to make it easy for styling . Install the package for sass also

npm i sass

Once the packages and dependencies are finished downloading, start up your IDE and locate your project folder. Lets start Create Simple Login form with React JS code

1. App.js Code

import "./App.scss";
import Box from "@mui/material/Box";
import TextField from "@mui/material/TextField";

function App() {
  return (
    <Box component="form" noValidate autoComplete="off">
      <div className="App">
        <div className="container">
          <div className="card_area">
            <h1 className="container_title">Back to your digital life</h1>
            <p className="container_para">Choose one of the option to go</p>
            <div className="input_card">
              <TextField
                className="input"
                id="outlined-basic"
                label="Email"
                variant="outlined"
              />
              <TextField
                className="input"
                id="outlined-basic"
                label="Password"
                variant="outlined"
              />
            </div>
            <div className="line">
              <p className="line_para">Or continue with</p>
            </div>
            <div className="social_card">
              <div className="google">
                <img className="google_img" alt="" src="/1.png" />
              </div>
              <div className="google">
                <img className="google_img" alt="" src="/2.png" />
              </div>
              <div className="google">
                <img className="google_img" alt="" src="/3.png" />
              </div>
            </div>
            <div className="card_button">
              <button class="button-28">Log in</button>
            </div>
          </div>
        </div>
      </div>
    </Box>
  );
}

export default App;

Let's move on to the index.js file, where there are simply a few lines of react js. It is just required to launch our react application. The code is provided below.

Index.js

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.scss";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

The styling portion of the index.js file should be styled similarly to the app.css file. The index.scss file only has a few lines of code.

index.scss

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900');

html,
body {
  width: 100%;
  height: 100%;
  background-color: #eef2f5;
  font-family: 'Inter', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
}

Website Link : Click Link