Forgot Password - Copy this React, Tailwind Component to your project

Generate the forgot password ui with the the input should be like the <div className="space y 2"> <div className="relative z 0 w full group"> <input type="email" name="email" id="floating_email" className="block py 2.5 px 0 w full text sm text neutral 600 bg transparent border 0 border b 2 border gray 300 appearance none dark:text white focus:outline none focus:ring 0 focus:border secondarycolor peer" placeholder=" " value={loginformData.email} onChange={(e) => loginHandleChange(e)} /> <label htmlFor="floating_email" className="peer focus:font medium absolute text sm text gray 500 dark:text gray 400 duration 300 transform translate y 6 scale 75 top 3 z 10 origin [0] peer focus:start 0 rtl:peer focus:translate x 1/4 rtl:peer focus:left auto peer focus:text secondarycolor peer focus:dark:text blue 500 peer placeholder shown:scale 100 peer placeholder shown:translate y 0 peer focus:scale 75 peer focus: translate y 6" > Email address </label> {errors?.email ? <p className="mt 1 text sm text red 600 dark:text red 500"> {errors?.email} </p>: <span className="h 5 w full block"></span>} </div> <div className="relative z 0 w full group"> <input type={showPassword ? "text" : "password"} // Toggle password visibility name="password" id="password" value={loginformData.password} onChange={(e) => loginHandleChange(e)} className="block py 2.5 px 0 w full text sm text neutral 600 bg transparent border 0 border b 2 border gray 300 appearance none dark:text white dark:border gray 600 dark:focus:border blue 500 focus:outline none focus:ring 0 focus:border secondarycolor peer" placeholder=" " required /> <label htmlFor="password" className="peer focus:font medium absolute text sm text gray 500 dark:text gray 400 duration 300 transform translate y 6 scale 75 top 3 z 10 origin [0] peer focus:start 0 rtl:peer focus:translate x 1/4 rtl:peer focus:left auto peer focus:text secondarycolor peer focus:dark:text blue 500 peer placeholder shown:scale 100 peer placeholder shown:translate y 0 peer focus:scale 75 peer focus: translate y 6" > Password </label> {errors?.password ? <p className="mt 1 text sm text red 600 dark:text red 500"> {errors?.password} </p>: <span className="h 5 w full block"></span>} <button type="button" className="absolute right 3 top 2 text neutral 600 dark:text white" onClick={togglePasswordVisibility} > {showPassword ? ( <FaEyeSlash className="h 5 w 5" /> ) : ( <EyeIcon className="h 5 w 5" /> )} </button> </div> <div className="flex flex wrap items center justify between gap 4"> {/* <div className="flex items center"> <input id="remember me" name="remember me" type="checkbox" className="h 4 w 4 text blue 600 focus:ring blue 500 border gray 300 rounded" /> <label htmlFor="remember me" className="ml 3 block text sm text gray 800" > Keep Me Logged In </label> </div> */} <div className="text sm"> <Button variant="link" type="button" onClick={()=>ForgotPasswordLink(3015)} className="text blue 600 hover:text blue 500 font semibold" > Forgot your password? </Button> </div> </div> </div>