JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <div class="container">
      <div class="wrap">
        <div class="item">
          <label for="user_Name">用戶暱稱</label>
          <input type="text" name="user_Name" id="userName" required />
          <span class="hintName hint">不能為空白、必須在40字以內</span>
        </div>
        <div class="item">
          <label for="user_Email">Email</label>
          <input type="email" name="user_Email" id="userEmail" required />
          <span class="hintEmail hint">不能為空白、必須包含 @ 符號</span>
        </div>
        <div class="item">
          <label for="user_Pwd">密碼</label>
          <input type="password" name="userPwd" id="userPwd" required />
          <span class="hintPwd hint"
            >不能為空白、必須在8字以上、必須在100字以內</span
          >
        </div>
        <div class="done">
          <input type="submit" id="" onclick="done()" />
        </div>
      </div>
    </div>
    <script src="./javascript.js"></script>
  </body>
</html>

CSS

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  background-color: #fcdebe;
}

.container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrap {
  background-color: #fff;
  padding: 60px 30px;
  border-radius: 10px;
}
.item {
  margin-top: 20px;
}

.item input {
  width: 100%;
  border: none;
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.3);
  padding: 5px;
  border-radius: 5px;
  margin-top: 5px;
}

.item span {
  margin-top: 5px;
  color: red;
}

.done {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.done input {
  padding: 10px;
  border: none;
  background-color: brown;
  color: #fff;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
}

.hint {
  display: none;
}

JavaScript

let userName = document.querySelector("#userName");
let userEmail = document.querySelector("#userEmail");
let userPwd = document.querySelector("#userPwd");

let hintName = document.querySelector(".hintName");
let hintEmail = document.querySelector(".hintEmail");
let hintPwd = document.querySelector(".hintPwd");

function done() {
  if (userName.value == "" || userName.value.length > 40) {
    hintName.style.display = "block";
  } else {
    hintName.style.display = "none";
  }

  if (userEmail.value == "" || userEmail.value.includes("@") == false) {
    hintEmail.style.display = "block";
  } else {
    hintEmail.style.display = "none";
  }

  if (
    userPwd.value == "" ||
    userPwd.value.length < 8 ||
    userPwd.value.length > 100
  ) {
    hintPwd.style.display = "block";
  } else {
    hintPwd.style.display = "none";
  }

  console.log(1);
}