JSFiddle - React, Tailwind, and code Playground

HTML

<header><br>Your Header</header>
<div>
    <form action="#">
    <br />
        <input type="text" name="test" placeholder="First Name" required />
        <br />
        <br />
        <input type="text" name="test2" placeholder="Last Name" required />
        <p>Click Submit (at the bottom of the page), without filling any input field(s).</p>
        <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="Submit">
    </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);
    });
}