```
     import React, { useState } from "react";
        import facebook from "../UI/icons/facebook.png";
        import Button from "../UI/Button/Button";
        import Card from "../UI/Card/Card";
        import twitter from "../UI/icons/twitter.png";
        import instagram from "../UI/icons/instagram.png";
        const Login = () => {
          const [enteredEmail, setEnteredEmail] = useState("");
          const [emailIsValid, setEmailIsValid] = useState("");
          const [enteredPassword, setEnteredPassword] = useState("");
          const [passwordIsValid, setPasswordIsValid] = useState("");
          const [formIsValid, setFormIsValid] = useState("");

          const emailChangeHandler = (event) => {
            setEnteredEmail(event.target.value);

            setFormIsValid(
              event.target.value.includes("@") && enteredPassword.trim().length > 6
            );
          };
          const passwordChangeHandler = (event) => {
            setEnteredPassword(event.target.value);
            setFormIsValid(
              event.target.value.trim().length > 6 && enteredEmail.includes("@")
            );
          };
          const validateEmailHandler = () => {
            setEmailIsValid(enteredEmail.includes("@"));
          };

          const validatePasswordHandler = () => {
            setPasswordIsValid(enteredPassword.trim().length > 6);
          };
          const submitHandler = (event) => {
            event.preventDefault();
            console.log(enteredEmail);
            console.log(enteredPassword);
          };
          return (
            <Card className="bg-slate-100 border-1 rounded-xl shadow-xl w-[30vw] m-auto mt-20 mb-20">
              <div className="flex justify-center text-2xl font-bold pt-4">Login</div>
              <div className="flex justify-center px-0 py-5">
                <form onSubmit={submitHandler}>
                  <div>
                    <label htmlFor="email" className="text-lg font-bold">
                      E-mail
                    </label>
                    <div>
                      <input
                        value={enteredEmail}
                        type="email"
                        id="email"
                        placeholder="Type your email"
                        className={
                          emailIsValid === false
                            ? "bg-red-200 border-b-[2px] border-red-600 text-white text-lg px-1 rounded shadow-md h-10  w-[19rem] outline-none"
                            : "border-b-[2px] text-lg px-1 rounded shadow-md border-gray-400 h-10  w-[19rem] outline-none"
                        }
                        onChange={emailChangeHandler}
                        onBlur={validateEmailHandler}
                      />
                    </div>
                  </div>
                  <div className="mt-4">
                    <label className="text-lg font-bold" htmlFor="password">
                      Password
                    </label>
                    <div>
                      <input
                        value={enteredPassword}
                        type="password"
                        id="password"
                        placeholder="Type your password"
                        className={
                          passwordIsValid === false
                            ? "bg-red-200 border-b-[2px] border-red-600 text-white text-lg px-1 rounded shadow-md h-10  w-[19rem] outline-none"
                            : "border-b-[2px] text-lg px-1 rounded shadow-md border-gray-400 h-10  w-[19rem] outline-none"
                        }
                        onChange={passwordChangeHandler}
                        onBlur={validatePasswordHandler}
                      />
                    </div>
                    <div className="flex justify-end">Forget password</div>
                  </div>

                  <div className="flex justify-center">
                       <Button
                      className="mt-4 border-gray-400 rounded-xl px-32 py-2 cursor-pointer shadow-md bg-slate-400 hover:bg-slate-600 hover:text-white"
                      type="submit"
                      disabled={!formIsValid}
                    >
                      LOGIN
                    </Button>
                  </div>

                  <div className="flex justify-center mt-4">Or Sign Up Using</div>
                  <div className="flex justify-center mt-2 ">
                    <div className="mx-1">
                      <img src={instagram} alt="facebook" width="30" />
                    </div>
                    <div className="mx-1">
                      <img src={twitter} alt="facebook" width="30" />
                    </div>
                    <div className="mx-1">
                      <img src={facebook} alt="facebook" width="30" />
                    </div>
                  </div>
                  <div className="flex justify-center mt-[9rem]">Or Sign Up Using</div>
                  <div className="flex justify-center">SIGN UP</div>
                </form>
              </div>
            </Card>
          );
        };

        export default Login;

```

**this is button code where i've error**

```
<Button
                          className="mt-4 border-gray-400 rounded-xl px-32 py-2 cursor-pointer shadow-md bg-slate-400 hover:bg-slate-600 hover:text-white"
                          type="submit"
                          disabled={!formIsValid}
                        >
                          LOGIN
                        </Button>

```

[image](https://i.stack.imgur.com/6NQOR.png)
this is my code's output and i want to make this **LOGIN** button disable while validating fields but it don't work while i am using className that contain tailwind code..
i also have a piic and code where disable works.

```
 <Button
                //className="mt-4 border-gray-400 rounded-xl px-32 py-2 cursor- 
                 //pointer shadow-md bg- 
                 //slate-400 hover:bg-slate-600 hover:text-white"
                      type="submit"
                      disabled={!formIsValid}
                    >
                      LOGIN
                    </Button>

```

[image](https://i.stack.imgur.com/uAD2f.png)

now disable is working as i have commented out className attribute.