JSFiddle - React, Tailwind, and code Playground

HTML

<?php
include "select.php"
?>
<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 type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script>
    	<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" value="" 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>
            
            <?php
            include 'test_db.php'; 
            
            $query =  mysql_query("SELECT * FROM countries");
            while ( $resalt = mysql_fetch_assoc( $query ) ){
            
             echo '<p>Запись id='.$row['id_country'].'. Текст: '.$row['country_name'].'</p>';
             }
            ?>
            <select>
            	<option><?php echo ".$resalt['country_name'].";?>...

CSS

@charset "utf-8";
.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.value.focus();
	}
if(form.login.value.length<4){
		alert("Login is very short!");
		form.login.value.focus();	
	}
if(form.password.value.length<4){
		alert("Password is very short!");
		form.login.value.focus();		
	}	
}