JSFiddle - React, Tailwind, and code Playground

HTML

<app>
  <div class="xui-page-body">
    <login-page>
      <login></login>
    </login-page>
  </div>
  <footer></footer>
</app>

CSS

body {
  display: flex; /* new */
}

app {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    width: 100%; /* new */
}
.xui-page-body {
    padding-bottom: 40px;
    display: flex;
    flex: 1;
    flex-direction: column;
}
login-page {
  flex: 1;
  padding: 10px;
  margin-bottom: -40px;
  display: block;
  background:green;
}
login {
  display: block;
  height: 200px;
  background: red;
}
footer {
  height: 50px;
  display: block;
  background:black;
}