SignUpForm.js

import React, { useState } from 'react';
import { Link } from 'react-router-dom';

const SignUpForm = () => {
    const[formData, setFormData] = useState({
        firstName: '',
        lastName: '', 
        email: '', 
        password: '',
        successMsg: false,
        errorMsg: false
    })

    const handleChange = (evt) => {
        setFormData({
            ...formData,
            [evt.target.name]: evt.target.value,
        })

    }

    const handleSubmit = (evt) => {
        evt.preventDefault()
    }

    return (
        <div className='flex mt-20 items-center justify-center'>
            <div className='bg-white p-12 rounded-md w-1/3 shadow-lg'>
                <h1 className='text-black font-montserrat font-extrabold text-3xl mb-12 ml-3'>Tickcrypt</h1>
                <form className='signup-form space-y-5 px-100' onSubmit={handleSubmit}>
                    <input className='font-montserrat font-medium rounded-full w-full py-4 px-7 shadow-lg' name='firstName' value={formData.firstName} type='text' placeholder='First Name' onChange={handleChange}></input>
                    <input className='font-montserrat font-medium rounded-full w-full py-4 px-7 shadow-lg' name='lastName' value={formData.lastName} type='text' placeholder='Last Name' onChange={handleChange}></input>
                    <input className='font-montserrat font-medium rounded-full w-full py-4 px-7 shadow-lg' name='email' value={formData.email} type='email' placeholder='Email Address' onChange={handleChange}></input>
                    <input className='font-montserrat font-medium rounded-full w-full py-4 px-7 shadow-lg' name='password' value={formData.password} type='password' placeholder='Password' onChange={handleChange}></input>
                    <button className='py-4 px-14 text-white bg-purple-500 hover:bg-purple-400 font-montserrat font-medium rounded-full' type='submit'>Sign Up</button>
                    <div className='mt-6 '>
                        <p className='forgot-password'>
                            <Link to='/ForgotPassword' className='text-gray-400'>Forgot Password?</Link>
                        </p>
                        <div className='mt-4'>
                            <p className='text-gray-400 inline'>
                                Already have a Tickcrypt account?
                            </p>
                            <Link to='/Login' className=' pl-2 text-purple-500'>Sign In</Link>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    );
}

export default SignUpForm;