JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div class="header">
        Header
    </div>
    <div class="container">
      <form action="">
        <label>Testfield1: <input type="text"></label>
        <label>Testfield2: <input type="text"></label>
        <label>Testfield3: <input type="text"></label>
        <label>Testfield4: <input type="text"></label>
        <label>Testfield5: <input type="text"></label>
        <label>Testfield6: <input type="text"></label>
        <label>Testfield7: <input type="text"></label>
        <label>Testfield8: <input type="text"></label>
        <label>Testfield9: <input type="text"></label>
      </form>
    </div>
    <div class="footer">
        Footer
    </div>
  </body>
</html>

CSS

body {
  padding: 120px 0 50px 0;
}
.header {
    position: fixed;        
    height: 100px;
    width: 100%;
    top: 0;
    background: #bada55;
}
.footer {
    position: fixed;
    height: 30px;
    width: 100%;
    bottom: 0;
    background: #facade
}
.fixfixed .header,
.fixfixed .footer {
    position: absolute;
}
label {
    display: block;
    margin: 0 0 60px 0;
}

JavaScript

jQuery(function(){
    var $body = jQuery('body');
    var $inputs = jQuery('input');

    $inputs.on('focus', function(e) {
        $body.addClass('fixfixed');
    });
    $inputs.on('blur', function(e) {
        $body.removeClass('fixfixed');
    });
});