JSFiddle - React, Tailwind, and code Playground

HTML

<header>This is the header</header>
<div>
    <form action="#" id="abc">
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br/>
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br/>
        <input id="def" type="text" name="test" placeholder="write your name" required />
        <p>Click send (at the bottom of the page), without filling the input field.</p>
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br/>
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br/>
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br/>
        <input type="submit" value="send">
    </form>
</div>

CSS

body {
    margin: 0;
    margin-top: 50px;
    text-align: center;
}

header {
    position: fixed;
    width: 100%;
    height: 50px;
    background-color: #CCCCCC;
    text-align:center;
    top: 0;
}

JavaScript

var elements = document.querySelectorAll('input,select,textarea');

for(var i = elements.length; i--;){
    elements[i].addEventListener('invalid',function(){
        this.scrollIntoView(false);
    });
}