ReactJs

Step -1 Create new file name registration.jsx

import {useState } from 'react'
import '../css/registration.css'
import { useLocation, useNavigate } from 'react-router-dom';
const Registration = ()=>{
    const [firstname, setfirstname] = useState('');
    const [lastname, setlastname] = useState('');
    const [mobileno, setmobileno] = useState('');
    const [email, setemail] = useState('');
    const [password, setpassword] = useState('');
   
    const handleFirstname = (e)=>{
        setfirstname(e.target.value)  
    }
    const handleLastname = (e)=>{
        setlastname(e.target.value)
    }
    const handleMobileno = (e)=>{
        setmobileno(e.target.value)
    }
    const handleEmail = (e)=>{
        setemail(e.target.value)
    }
    const handlePassword = (e)=>{
        setpassword(e.target.value)
    }
    const handleSubmit = (e)=>{
        e.preventDefault()
        console.log(firstname,lastname)
    }
    return(
        <> 
        <div id="form-top-container">
        <div id="form-container">
            <div class="header-form">{form_title} </div>
            <div class="form_message">{form_message}</div>
            <form class="form">
            <div class="input-box">
                <label for="firstname">First name </label>
                <input type="text" placeholder="First name" value={firstname} onChange={handleFirstname}/>
            </div>
            <div class="input-box">
                <label for="lastname">Last name </label>
                <input type="text" placeholder="Last name" value={lastname} onChange={handleLastname}/>
            </div>
            <div class="input-box">
                <label for="mobileno">Mobile no </label>
                <input type="text" placeholder="Mobile no" value={mobileno} onChange={handleMobileno}/>
            </div>
            <div class="input-box">
                <label for="email">Email </label>
                <input type="text" placeholder="Email" value={email} onChange={handleEmail}/>
            </div>
            <div class="input-box">
                <label for="password">Password</label>
                <input type="text" placeholder="Password" value={password} onChange={handlePassword}/>
            </div>
            <input type="submit" value={button_name} onClick={handleSubmit}/>
            </form>
         </div>
        </div>

        </>
    )
} 
export default Registration

Step2 - Add css file as registration.css

* {
    margin: 0px;
    padding: 0px;
  }

  #form-top-container {
    height: 84vh;
    background-color: lightgray;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
  }

  #form-container {
    max-width: 600px;
    max-height: 700px;
    background-color: white;
    padding: 25px;
    border-radius: 5px;
  }

  #form-container .header-form {
    font-size: 30px;
    color: gray;
    text-align: center;

  }

  #form-container .form {
    margin-top: 10px;
  }

  .input-box {
    margin-top: 10px;
  }

  .form :where(.input-box input) {
    width: 100%;
    margin-top: 10px;
    height: 35px;
    font-size: 16px;
    font-weight: 500;

  }

  .input-box label {
    color: gray;
    margin-top: 10px;
  }

  .form .column {
    display: flex;
    column-gap: 15px;
  }

  input[type="submit"] {
    margin-top: 10px;
    height: 35px;
    width: 100%;
    background-color: skyblue;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 20px;
    cursor: pointer;
  }

  input[type="submit"]:hover {
    background-color: blue;
  }
  .naviage_link{
    color: rgb(230, 52, 52);
  }
  .form_message{
    color: red;
  }

Step - 3 Create an registration page as  registrationpage.jsx

import Footer from "../componants/footer"
import Header from "../componants/header"
import Registration from "../componants/registration"

const  Registrationpage = ()=>{
    return(
        <>
        {<Header/>}
        {<Registration/>}
        {<Footer/>}
        </>
    )
}
export default Registrationpage

Step -4 Add route in app.js

import Registrationpage from './pages/registrationpage';
<Route path='/registration' element={<Registrationpage/>}/>

Step -5 Add a link in header as  header.jsx

  <li><a onClick={()=>{navigate('/registration')}}>Registration</a></li>