JSFiddle - React, Tailwind, and code Playground

HTML

<div class="forma">
<div class="header_form">Form1</div>
  <div class="forma_text">
<div class="forma_text_header"><h2 id="H1">Registration</h2>
</div>
	<div class="forma_text_forms">
    	<script language="JavaScript" src="test_check.js"></script>
    	<form  method="post" name="form" action="reg_action.php" onsubmit="check(this)"; >
    	<table width="90%" height="100%">
    	  <tr>
    	    <td width="40%" height="30">Login</td>
    	    <td width="53%"><label for="login"><input name="login" type="text" size="17" maxlength="20" required></label></td>
  	    </tr>
    	  <tr>
    	    <td width="40%" height="30">Password</td>
    	    <td><label for="password"><input name="password" type="password" size="17" maxlength="20" required><span id="password"></span></label></td>
  	    </tr>
    	  <tr>
    	    <td width="40%" height="30">Repeat password</td>
    	    <td><label for="passwordcontrol"><input name="passwordcontrol" type="password" size="17" maxlength="20" required><span id="passwordcontrol"></span></label></td>
  	    </tr>
    	  <tr>
    	    <td width="40%" height="30">Telephone</td>
    	    <td><label for="tel"><input name="tel" type="tel"  placeholder="+XX-(XXX)-XXX-XX-XX" pattern="[+]{1}[0-9]{2}-[(]{1}[0-9]{3}[)]{1}-[0-9]{3}-[0-9]{2}-[0-9]{2}"; id="tel" size="17" maxlength="20" required></label></td>
  	    </tr>
    	  <tr>
    	    <td width="40%" height="30">Your country</td>
    	    <td><select name="country">
    	      <option selected></option>
  	      </select ></td>
  	    </tr>
    	  <tr>
    	    <td width="40%" height="30">Your city</td>
    	    <td><select name="city">
    	      <option selected></option>
  	      </select ></td>
  	    </tr>
        <tr>
    	      <td width="40%" height="30">Invite</td>
    	    <td><label for="invite"><input name="invite" type="text" size="17" maxlength="20" required></label></td>
  	    </tr>
        <tr width="40%" height="120">
    	      <td height="86"><button type="submit"...

CSS

.forma {
	background-color: #58E7D7;
	height: 480px;
	width: 350px;
	background: linear-gradient(to bottom, SkyBlue , AliceBlue , LightBlue ,LightBlue , LightBlue);
	border: 2px groove;
	padding: 9px;
	overflow: hidden;
}
.header_form {
	height: 30px;
	width: 100%;
	
}
.forma_text{
	height: 94%;
	width: 100%;
	background-color: #F2F6FB;
	
}
.forma_text_header {
	padding-top: 30px;
	padding-right: 30px;
	padding-left: 30px;
	padding-bottom: 30px;
	height: 30px;	
	
}
#H1{
	bottom: 60px;
	margin-left: 30px;
	padding-bottom: 30px;
	

}

.forma_text_forms {
	height: 50%;
	width: 100%;
	margin-left: 15px;
	padding-top: 10px;
}

JavaScript

function check (form){
	if(form.password.value != form.passwordcontrol.value){
		alert ("Passwords are not correct!");
		form.password.focus();
		return false;
	}
	if (form.password.length<6){
      document.getElementById("password").value=" Слишком длинный пароль.";
      return (false);
	}
	if(form.login.length<4){
		alert("Login is very short!");
		form.login.focus();	
		return false;
	}
	
	
}