JSFiddle - React, Tailwind, and code Playground

HTML

<div class="page-container">

    <div class="header">
    </div>

    <div class="content-container">

      <div class="content-insider">
          Different kind of content here</br> Different kind of content here</br> Different kind of content here</br> Different kind of content here</br> Different kind of content here</br> Different kind of content here</br> Different kind of content here</br> Different kind of content here</br> Different kind of content here</br> Different kind of content here</br> Different kind of content here</br> Different kind of content here</br> Different kind of content here</br> Different kind of content here</br> Different kind of content here</br> Different kind of content here</br> Different kind of content here</br> Different kind of content here</br> Different kind of content here</br> Different kind of content here</br> Different kind of content here</br> Different kind of content here</br> Different kind of content here</br> Different kind of content here</br> Different kind of content here</br>
      </div>

    </div>
</div>
    
<div class="footer">
</div>

CSS

html, body {
    height: 100%;
}

.page-container {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    min-height: 100%;
    padding-bottom: 50px;
}

.footer {
    height: 50px;
    margin-top: -50px;
    background: indianred;
}