Install React Icons
npm install react-icons --save
Code
import { useState } from "react";
import { FaEye, FaEyeSlash } from "react-icons/fa";
function Login() {
const [passwdLogin, setPasswdLogin] = useState(true)
return (
<form className="w-1/2 mx-auto mt-16 p-8 rounded-lg bg-blue-300">
<h1 className="text-xl text-center">Login</h1>
<p className="mt-4">Email / Phone</p>
<input type="text" className="p-4 border rounded-xl w-full" placeholder="Input Email or Phone"/>
<p className="mt-4">Password</p>
<div className="relative">
<input type={`${passwdLogin ? 'password' : 'text'}`} className="form w-full border p-4 rounded-lg" placeholder="Input New Password"/>
<span className="absolute inset-y-0 cursor-pointer right-0 pr-3 flex items-center text-sm leading-5" onClick={() => {
passwdLogin ? setPasswdLogin(false) : setPasswdLogin(true)
}}>
{passwdLogin ?
(<FaEyeSlash className=" z-10 inline-block align-middle" />) :
(<FaEye className=" z-10 inline-block align-middle" />)
}
</span>
</div>
<span className="text-right text-end mt-2 text-black-3 cursor-pointer" onClick={() => setFormStatus('forgotPassword')}>Forgot Password</span>
<button type="submit" className="w-full bg-blue-900 text-white p-3 mt-4 rounded-xl" >Login</button>
</form>
)
}
export default Login
Finished