JSFiddle - React, Tailwind, and code Playground

by nicholas_r

HTML

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

<div class="content">
  
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis aut, reprehenderit! Amet consectetur consequuntur debitis enim, omnis iste voluptatum corporis vero sit, fugit est minus officia iure quaerat obcaecati recusandae!</div>
  <div>Necessitatibus sequi, sit in nulla optio dignissimos inventore impedit delectus doloribus fugiat laboriosam quia, iure. Necessitatibus nisi nulla at voluptatem voluptates odio id distinctio eveniet, vero quo debitis, autem temporibus.</div>
  <div>Minima aliquam laudantium omnis libero corrupti beatae iusto, officiis, ab, animi odio earum quo commodi consequatur. Labore beatae numquam quam quae expedita minus ex amet. Fugiat aperiam, exercitationem velit in!</div>
  <div>Excepturi ut, recusandae modi, quaerat fugiat autem voluptatum veniam vel, quod consequuntur, dicta ullam doloremque. Nemo esse pariatur in explicabo inventore sequi sapiente voluptatem, aliquid quae, aliquam incidunt, rerum quidem!</div>
  <div>Voluptate nisi perspiciatis eligendi deserunt, maiores reprehenderit deleniti voluptatem repellat labore recusandae suscipit amet rerum inventore excepturi, ipsam enim magni nesciunt quam ab, dignissimos, adipisci possimus. Vero velit ab quaerat.</div>
  
</div>
<div class="footer">
  footer here
</div>

CSS

html, body{
  margin: 0;
  padding: 0;
  height: 100%;
  position: relative;
  background-color: #fff;
}

.header, .footer{
  height: 50px;
  background-color: #e0e0e0;
}

.content{
  min-height: calc(100% - 100px);
}