JSFiddle - React, Tailwind, and code Playground

HTML

<div id="signIn">
      <h1>Sign In</h1>
      <hr />
      <input type="text" placeholder="Login here..." id="loginHere" name='login'/>
      <input type="password" placeholder="Password here..." id="passwordHere" name='password'/>
      <br />
      <p id="PleaseCheck">Please check your login or password</p>
      <button id="buttonSignIn" onclick="buttonSignIn()" name='buttonSignInn'>Sign in</button>
      <button id="one" disabled name='oneq'>Sign up</button>
    </div>

JavaScript

const vLogin = /^[a-zA-Z]{1,20}$/;
const vPassword = /^[a-zA-Z0-9]{8,15}$/;
 
function buttonSignIn() {
 
    const arr = () => {
        if (vLogin.test(loginHere.value)) {
            loginHere.style.border = "5px solid green";
 
        } else {
            loginHere.style.border = "5px solid red";
            //signIn.style.display = "none";
        }
    };
 arr()
    const arr1 = () => {
        if (vPassword.test(passwordHere.value)) {
            passwordHere.style.border = "5px solid green";
 
        } else {
            passwordHere.style.border = "5px solid red";
 
        }
    };
    arr1()
 
 

}