JSFiddle - React, Tailwind, and code Playground

HTML

<div id="modal_form">
	<span id="modal_close">X</span>
		<form novalidate>
			<h3 class="form">Обратная связь</h3>
			<h5>Ваше имя*</h5>
			<input type="text" name="name" required>
			<h5>Телефон*</h5>
			<input type="tel" name="tel" required>
			<h5>Email*</h5>
			<input type="email" name="email" required>
			<h5>Сообщение</h5>
			<textarea name="text"></textarea>
			<input type="submit" class="send_form" value="Отправить">
		</form>
	</div>

CSS

#modal_form input {
	width: 344px;
	height: 30px;
	position: relative;
}

h3.form {
	margin-bottom: 30px;
	color: #535353;
}

form h5 {
	color: #535353;
	margin: 20px 0 5px;
	}

input[type="submit"] {
	margin-top: 30px;
	height: 42px !important;
	width: 130px !important;
	background-color: #777777;
	text-transform: uppercase;;
	font-size: 19px;
	color: #FFF;
	font-weight: bold;
}	

textarea {
	width: 344px;
	height: 150px;
}


  
  
.invalid  input:invalid {
		box-shadow: 4px 4px 10px 3px #FF8383;
		border: 1px solid #FF8383;
	}

JavaScript

$('form').on('submit', function(e){
  if( ! this.checkValidity()){
  		e.preventDefault();
    	$(this).addClass('invalid');
  }
});