Website Login Using React JS

Since we’ve been trying to learn React JS, I decided to make a website login using it!!

Made the login template

LoginRegister.jsx

import React from 'react'
import './LoginRegister.css';

const LoginRegister = () => {
    return (
        <div className='wrapper'>
            <div className="form-box-login">
                <form action="">
                    <h1>Login</h1>
                    <div className="input-box">
                        <input type="text"
                        placeholder='Username' required />
                    </div>
                    <div className="input-box">
                        <input type="password"
                        placeholder='Password' required />
                    </div>

                    <div className="remember-forgot">
                        <label><input type="checkbox" />Remember me</label>
                        <a href="#">Forgot Password?</a>
                    </div>

                    <button type="submit">Log in</button>

                    <div className="register-link">
                        <p>Don't have an account? <a
                            href="#">Register</a></p>
                    </div>
                </form>
            </div>
        </div>
    );
};

export default LoginRegister

index.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

body {
  font-family: "Poppins", sans-serif;
}

app.js

import LoginRegister from './components/LoginResgister/LoginRegister';

function App() {
  return (
    <div>
      <LoginRegister />
    </div>
  );
}

export default App;

I tweaked up app.js and took out all the sample code from index.css and put the stuff needed for the font we’re using. Then I added login inputs for username and password.

Username

<div className="input-box">
                        <input type="text"
                        placeholder='Username' required />
                    </div>

Password