JSFiddle - React, Tailwind, and code Playground

by Plippie Plop

HTML

<header>This is the header</header>
<div>
    <form action="#">
        <input type="text" name="test" placeholder="write your first name" required />
        <br />
        <br />
        <input type="text" name="test2" placeholder="write your last name" required />
        <p>Click send (at the bottom of the page), without filling the 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 />
        <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 />
        <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 />
        <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 />  ...

CSS

html{
  scroll-padding-top: 60px;
  
}
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);
    });
}