JSFiddle - React, Tailwind, and code Playground

HTML

<header>
  Header
</header>
<wrapper>

  <div class="aligner">
    <div class="aligner-center">
       Login Form
    </div>
  </div>
</wrapper>
<footer>
  Footer
</footer>

CSS

html {
  height: 100%;
}

body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

wrapper {
  height: 100%;
  /* flex: 1; would be enough but it looks bad in IE */
  flex: 1 0 auto;
  background-color: #3D9970;
}

.aligner {
    height:100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.aligner-center {
    max-width: 50%;
    background-color: #ffb443;
    padding: 20px;
}

body {
  font: 16px/1.5 sans-serif;
}
p {
  margin-bottom: 1em;
}
header, wrapper, footer {
  padding: 2em;
  color: white;
}
header {
  background-color: #85144B;
}

footer {
  background-color: #001F3F;
}