JSFiddle - React, Tailwind, and code Playground

HTML

<main>
  <article>
     <header>
        <h1>test</h1>
     </header> 
     
    
    
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here end</p>
  </article>
  <footer>Footer</footer>
</main>

CSS

* {
  margin: 0;
  box-sizing: border-box;
  padding: 0;
}
html, body, main {
  //height: 100%;
  height: 100%;
  background:red;
}

article{
  //height: calc(100% - 50px);
  min-height: 100%;
  background: yellow;
  padding-bottom: 50px;
  margin-bottom:-50px;
}

main {
  background-color:lightgray;  
}

footer {
  background-color: green;
  height: 50px;
}