JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
  <h3>註冊帳號</h3>
  <form action="">
    <div class="name">
      <label for="name">用戶暱稱</label><br>
      <input id="name" type="text" name="form">
      <span>不能為空白,必須在40字以內</span>
    </div>
    <div class="email">
      <label for="email">信箱</label><br>
      <input id="email" type="text" name="form">
      <span>不能為空白,必須包含@的符號</span>
    </div>
    <div class="password">
      <label for="password">密碼</label><br>
      <input id="password" type="password" name="form">
      <span>不能為空白,必須在8字以上,100字以內</span>
    </div>
    <button  class="btn" type="button">註冊</button>
  </form>
</div>

CSS

*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.wrap{
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #cff;
  height: 100vh;
  padding-top: 10px;
}
h3{
  margin-bottom: 10px;
}
div{
  margin-top: 10px;
}
label{
  font-size: 12px;
}
span{
  color: red;
  font-size: 10px;
  font-weight: 600;
  opacity: 0;
  display: block;
}
input{
  margin-top: 5px;
  border-radius: 5px;
  width: 200px;
}
button{
  width: 100px;
  position: relative;
  left: 25%;
  border-radius: 5px;
  background-color: #ccc;
  cursor: pointer;
  height: 30px;
  margin-top: 10px;
  font-weight: 600;
}
button:hover{
  opacity: 0.8;
}

JavaScript

var btn=document.querySelector('.btn');
function myfunction(){
  var nametext=document.querySelector('.name span');
  var emailtext=document.querySelector('.email span');
  var passwordtext=document.querySelector('.password span');
  var name=document.querySelector('#name').value;
  var email=document.querySelector('#email').value;
  var password=document.querySelector('#password').value;
  //判斷姓名條件
  if(name=='' || name.length>=40){
    nametext.style.opacity='1';
  }else{
    nametext.style.opacity='0';
  }
  //判斷信箱條件
  if(email.includes('@')){
    emailtext.style.opacity='0';
  }else{
    emailtext.style.opacity='1';  
  }//判斷密碼條件
  if(password=='' || password.length<8 || password.length>=100 ){
    passwordtext.style.opacity='1';
  }else{
    passwordtext.style.opacity='0';
  }

}
btn.onclick=myfunction;