Simple Validation Form In React Using UseHooks And LocalStorage With Some Tailwind🥳🎉

<div
      className="login grid place-content-center  
    bg-gradient-to-r from-purple-900 via-purple-1000 to-blue-800 "
    >
      <form
        className="card grid place-content-center  h-96 w-96  
       "
        onSubmit={handleSubmit}
      >
        <label htmlFor="">name:</label>
        <input
          type="text"
          value={name}
          placeholder="Enter Your Name"
          onChange={(e) => setName(e.target.value)}
        />
        {errors.name}

        <label htmlFor="email">Email:</label>
        <input
          type="email"
          placeholder="email address"
          id="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
        {errors.email}

        <label htmlFor="password">Password:</label>
        <input
          type="text"
          placeholder="password"
          value={password}
          id="password"
          onChange={(e) => setPassword(e.target.value)}
        />
        {errors.password}

        <label htmlFor="phoneNumber">phone Number:</label>
        <input
          type="text"
          value={phoneNumber}
          placeholder="phone Number"
          id="phoneNumber"
          onChange={(e) => setPhoneNumber(e.target.value)}
        />

        <div className="buttons flex gap-3 justify-center mt-5">
          <button type="submit" className="btn-1">
            Sign Up
          </button>
          <button>
            <Link
              className="
        "
              to="/login"
            >
             Login{" "}
            </Link>
          </button>
        </div>
      </form>
    </div>

 const [email, setEmail] = useState("")
         const [password, setPassword] = useState("")
         const [name, setName] = useState("")
         const [phoneNumber, setPhoneNumber] = useState("")
         const [errors, setErrors] = useState({})

const handleSubmit = (e) => {
    e.preventDefault()
    formValidation()
    setUsers([...users, { email: email, password: password }])
  }

 const formValidation = () => {
    let newErrors = {}
    if (name === "") {
      newErrors.name = <h1 className="text-red-800 text-center">
        Name Can't Be Blanck</h1>
    }
    if (email === "") {span
      newErrors.email = <span className="text-red-800 text-center">
         Email Address Is Required</span>
    } else if (/^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/.test(email)) {
      newErrors.email = <span className="text-red-800 text-center">
        Email address is invalid</span>
    } else {
      newErrors.email = <h1 className="text-green-800 text-center ">
        Email is Valid</h1>
    }
    if (password === "") {
      newErrors.password = <span className="text-red-800 text-center">
        Password Is Required</span>
    } else if (!/^(?=.*d)(?=.*[a-z])(?=.*[A-Z]).{8,15}$/.test(password)) {
      newErrors.password = <span className="text-red-800 text-center">
        Invalid Password Format</span>
    } else {
      newErrors.password = <span className="text-green-800 text-center ">
        Correct Password</span>
    }
    setErrors(newErrors)
  }

const [users, setUsers] = useState(() => {
    const data = localStorage.getItem("data")
    return data ? JSON.parse(data) : []
  })

useEffect(() => {
    localStorage.setItem("data", JSON.stringify(users))
  }, [users])