JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
  <div class="header"></div>
  <div class="wrp-content">
  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet dolor, architecto obcaecati velit dicta voluptatum illum beatae aperiam iure minima doloribus et, iusto, voluptas corrupti minus possimus perferendis ratione doloremque fugit. Numquam voluptate
    maiores dolore, consequatur adipisci, consequuntur autem quibusdam, laboriosam veniam sit ratione natus voluptas dignissimos nisi odio quia. Nostrum rem earum aspernatur veritatis, animi nam quibusdam quasi totam eveniet! A possimus corrupti corporis
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus quod pariatur voluptatem a, alias assumenda inventore laudantium, quam distinctio, blanditiis consectetur. Quidem facere, quasi nisi vitae magnam et ipsum sed quos animi error tenetur
    blanditiis pariatur repellat nulla alias impedit repellendus voluptates non nostrum beatae quibusdam adipisci! Alias natus repellat rem eum cupiditate, eveniet facere dignissimos quod minima, consequuntur quibusdam suscipit maxime hic odit aspernatur
    non libero illo cum qui sint obcaecati consequatur quisquam quidem! Odio distinctio, ipsa quod dolor minima perspiciatis molestias voluptas quas ut, fuga iste aliquam dicta vel alias aspernatur! Quisquam totam maxime accusamus. Similique cum error
    at earum repellendus debitis dolor aspernatur aliquid dolorem id vitae cumque aut odio quis, reiciendis nobis soluta ea dolorum architecto eos autem. Magnam quia, quo vero aliquid cupiditate harum dolorum, optio id fugit numquam deserunt nihil ipsam
    expedita laborum nobis sed error voluptate tenetur quis omnis sapiente esse. Perspiciatis tenetur culpa illum fugit repellat nam maxime debitis, nisi deserunt maiores neque odio rem dolore dignissimos impedit consectetur cumque incidunt aspernatur?
    Doloribus saepe officiis recusandae mollitia nisi commodi qui, cumque, animi iure minus consectetur...

CSS

html,
		body,
		.main {
		  height: 100%;
		}
    body {
      overflow: hidden;
    }		
		.header,
		.footer {
		  height: 50px;
		  width: 100%;
		  position: fixed;
		  left: 0;
		  background: rgba(0, 0, 0, .5);
		}
		
		.header {
		  top: 0;
		}
		
		.footer {
		  bottom: 0;
		}
		 
    .wrp-content {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      
      margin: 50px 0;
      overflow-y: scroll;
    }
		.content {
		  
		  box-sizing: content-box;
		}