JSFiddle - React, Tailwind, and code Playground

by Konstantin Rouda

HTML

<div class="wrapper">
  <h1 class="headertext">Welcome back.</h1>
</div>
<div class="footer">Footer</div>

CSS

BODY {
    display: flex;
    display: flexbox;
    height: 100vh;
   -ms-flex-direction: column;
   flex-direction: column;
}

.wrapper {
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
}

.wrapper:after {
  display: block;
  content: "";
  height: 142px;
  background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
}

.footer {
  background-color: white;
  opacity: 0.5;
  height: 142px;
  text-align: center;
}