Create Login Interface using Next JS with Tailwind CSS

Create Login Interface using Next JS with Tailwind CSS

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

Screenshot from 2021-12-20 08-39-56.png