JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
  <body> 
    <div id="root" class="container">
     <div style="height: 100%;">
      <div><h1>HEADER</h1></div><hr>
      <div style="min-height: 60%;">
        <div class="h100">
          <div>some badge</div><br>
          <div>
            <div class="row justify-content-between">
              <div class="col-3">Item #2</div>
              <div class="col-3 text-right">
                <div>some stats</div>
              </div>
            </div>
            <div class="d-flex align-content-center">
              <div class="row justify-content-center">
                <div class="col text-center"><h3>THIS SHOULD BE IN THE MIDDLE OF A BLANK SPACE</h3></div>
              </div>
              <div class="row justify-content-center">
                <div class="col-4 text-right"><button class="btn btn-link">it's just below and left</button></div>
                <div class="col-4 text-left"><button class="btn btn-link">it's just below and right</button></div>
              </div>
            </div>
         </div>
        </div>
      </div><hr>
      <div class="footer">FOOTER</div>
     </div>
    </div>
  </body>

CSS

html, body {
        height: 100%;
        min-height: 100vh;
      }

      #root {
        height: 100%;
      }

      .h100 {
        height: 100%;
      }