JSFiddle - React, Tailwind, and code Playground

HTML

<body>
   <header>Einhorn-Flatulenz!</header>
   <main>
      <div id="bigFiller">
        Hello<br>
        Hello<br>
        Hello<br>
        Hello <a href="#foo">to foo</a><br>
        Hello<br>
        Hello<br>
        Hello<br>
        Hello<br>
        Hello<br>
        Hello<br>
        Hello<br>
        Hello<br>
        Hello<br>
        Hello<br>
        Hello<br>
        Hello<br>
        Hello<br>
        Hello<br>
        Hello<br>
        Hello<br>
        Hello<br>
        Hello<br>
        Hello<br>
        Hello<br>
        Hello<br>
        Hello<br>
        Hello<br>
        Hello<br>
        Hello<br>
        Hello<br>
        Hello<br>
        Hello<br>
        Hello<br>
        Hello<br>
        Hello<br>
        Hello<br>
        Hello<br>
        Hello<br>
        Hello<br>
        Hello<br>
        Hello<br>
        Hello<br>
        Hello<br>
        Hello<br>
        Hello<br>
        Hello<br>
        Hello<br>
        Hello<br>
        Hello<br>
        Hello<br>
        Hello<br>
        <a id="foo">Hello Foo</a><br>
        Hello<br>
      </div>
   </main>
   <footer>Ein Fiddle fĂĽr das SelfHTML Forum</footer>
</body>

CSS

body { display:flex; flex-direction:column; margin:0; box-sizing:border-box; height:100vh; }
header, footer { flex: 0 0 auto; }
header {
  font-size: 300%;
  text-align:center;
  border-bottom: 1px solid black;
}
footer {
  text-align:right; 
  border-top: 1px solid black;
  font-size: 0.7rem;
  margin-right: 2em;
}
main { flex: 1 0 1em; overflow-y:scroll;}

#bigFiller {
  height: 300vh; width:100%; 
  background-image: linear-gradient(to bottom, red, orange, yellow, green, blue, indigo, violet);
}