JSFiddle - React, Tailwind, and code Playground

HTML

<html>
  <title>Demo Form</title>
  <body>
    <form class="main-form" method="post">
                    <input class="input" type="text" name="username" id="name" placeholder="Username">
                    <p>Username must have more than 5 characters</p>
                    <input class="input" type="email" name="email" id="email" placeholder="Email">
                    <p>Email must of format <b>[email protected]</b></p>
                    <input class="input" type="password" name="password" id="password" placeholder="Password">
                    <p>Password must have more than 5 characters and aplhanumeric with a special character</p><br>
                    <button type="submit" class="login-btn" disabled>Register</button>
                </form>
  </body>
</html>

CSS

.input {
  outline: none;
}
.valid {
    border: 1px solid rgb(89, 224, 89);
}

input + p {
    opacity: 0;
}

.invalid {
    border: 2px solid rgb(245, 101, 101);
}

input.invalid + p {
    opacity: 1;
    color: orange;
}

JavaScript

const form = document.querySelector('.main-form')
form.addEventListener('keyup', (e) => {
    
    const loginButton = document.querySelector('.login-btn')
    const username = document.querySelector('#name').value
    const email = document.querySelector('#email').value
    const password = document.querySelector('#password').value
    let isUserNameValid = false;
    let isEmailValid = false;
    let isPasswordValid = false;

    if(username.length > 5) {
        isUserNameValid = true
    }
    if(email.length > 10) {
        isEmailValid = true
    }
    if(password.length > 10) {
        isPasswordValid = true
    }

    if(isUserNameValid === true && isEmailValid === true && isPasswordValid === true) {
        loginButton.disabled = false
        loginButton.style.cursor = 'pointer'
    } else {
        console.log('username',username, isUserNameValid)
        console.log('email',email, isEmailValid)
        console.log('password',password, isPasswordValid)
        loginButton.disabled = true
        loginButton.style.cursor = 'default'
        if(isUserNameValid === false) {
            e.target.classList.add('invalid')
            e.target.classList.remove('valid')
        }
        if(isEmailValid === false) {
            e.target.classList.add('invalid')
            e.target.classList.remove('valid')
        }
        if(isPasswordValid === false) {
            e.target.classList.add('invalid')
            e.target.classList.remove('valid')
        }
        if(isUserNameValid === true) {
            e.target.classList.add('valid')
            e.target.classList.remove('invalid')
        }
        if(isEmailValid === true) {
            e.target.classList.add('valid')
            e.target.classList.remove('invalid')
        }
        if(isPasswordValid === true) {
            e.target.classList.add('valid')
            e.target.classList.remove('invalid')
        }
    }

})