JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style>
html, body {width: 100%; height: 100%; padding: 0; margin: 0;}
label.error {display: none; font-size: 12px; padding: 2px; margin-left: 10px;}    
input.invalid + label.error {display: inline-block; }
</style>
</head>
<body>
<form method="get" action="" style="margin: 50px;">
<input type="text" placeholder="Test" required id="test"><label class="error">Что то пошло не так ... </label>
<br><br>
<input type="submit" value="Submit">
</form>
<script>
var test = document.getElementById('test');
test.addEventListener('invalid', function(e){
        e.preventDefault();
        this.classList.add('invalid')
}, false);
    test.addEventListener('input', function(e){
        this.classList.remove('invalid');
    }, false);
</script>
</body>
</html>