JSFiddle - React, Tailwind, and code Playground

HTML

<p>1. <input type="text"/></p>
<p>2. <input type="text"/></p>
<p>3. <input type="text"/></p>
<p>4. <input type="text"/></p>
<p>5. <input type="text"/></p>
<p>6. <input type="text"/></p>
<p>7. <input type="text"/></p>
<p>8. <input type="text"/></p>
<p>9. <input type="text"/></p>
<p>10. <input type="text"/></p>
<p>11. <input type="text"/></p>
<p>12. <input type="text"/></p>
<p>13. <input type="text"/></p>
<p>14. <input type="text"/></p>
<p>15. <input type="text"/></p>
<p>16. <input type="text"/></p>
<p>17. <input type="text"/></p>

CSS

p {
   padding: 20px;   
}

JavaScript

// Constant amount of padding an element should be from the bottom of the window
var padding = 50;

// Add focus event to all your different form elements
$("input, textarea, select").focus(function(){

    // Check their position relative to the window's scroll
    var elementBottom = $(this).offset().top + $(this).height();
    var windowScroll = $(window).scrollTop();
    var windowBottom = windowScroll + $(window).height();

    if(elementBottom + padding > windowBottom){
        $(window).scrollTop( windowScroll + padding);
    }

});