Login Page In React.js

 we'll show you how to create a simple login page using React. The login page will have input fields for the user to enter their username and password, and a button to submit the form. You'll learn how to use React's useState hook to manage state in your component, how to handle form submissions and validation, and how to use CSS to style your login page.

Login Page:

React.js file:

import { useState } from "react";

import React from "react";

import './component1.css';

function Login(){

  const [email,setEmail]=useState(" ");

  const [passwrod,setPassword]=useState("");

const handleSumbit=(e)=>{

e.preventDefault();

};

return(

 <div>

  <form onSubmit={handleSumbit}>

    <h1>Login</h1>

 <label>Email:</label>

 <input type="email" value={email} onChange={(e)=>setEmail(e.target.value)}/>

  <label>Password</label>

<input type="password" value={passwrod} onChange={(e)=>setPassword(e.target.value)}/>

  <button type="submit">Login</button>

</form>

</div>

);

}

export default Login;

component1.css:

form{

   display: flex;

   flex-direction: column;

}

div{

   max-width: 400px;

   margin:0 auto;

   padding: 20px;

   background-color: #f7f7f7;

   border-radius: 12px;

}

label{

   margin-bottom: 10px;

   font-weight: bold;

}

input{

   padding: 10px;

   margin-bottom: 20px;

   border: none;

   border-radius: 10px;

   box-shadow: 0 0 5px #322e2e;

}

button{

   padding: 10px;

   border: none;

   border-radius: 15px;

   background-color: #0b0a0a;

   color: #fff;

   font-weight: bold;

   cursor: pointer;

   transition: background-color 0.3s ease-in-out;

}

h1{

   text-align: center;

}

output: