JSFiddle - React, Tailwind, and code Playground

by ajai jothi

HTML

<div class="main">
  <div class="header">head</div>
  <div class="body">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae leo mauris. Nam orci orci, feugiat non urna et, consectetur efficitur neque. Nullam scelerisque quis tellus in volutpat. Sed eu nisi porttitor, dapibus est sit amet, fermentum dui. Quisque elementum auctor turpis sed dapibus. Sed pretium elit vel enim pulvinar, ac malesuada dui egestas. Nulla ornare arcu vel erat venenatis, a porta lacus mattis. Aenean ultricies volutpat lorem. Ut aliquam tincidunt imperdiet.

Cras quis lobortis diam, et vehicula nulla. Suspendisse felis neque, finibus sit amet odio vel, ornare pharetra neque. Sed sit amet ligula ipsum. Morbi vestibulum odio in erat iaculis venenatis. Integer laoreet ex ligula. Integer sit amet tellus pellentesque, fringilla mi viverra, vulputate nunc. Duis nec metus at ex ultricies rhoncus. Integer ut lorem at tellus dapibus fermentum. Quisque ultricies justo erat, ut euismod justo accumsan sit amet. Maecenas ac lectus at tellus gravida sodales et et metus. Maecenas bibendum molestie dui vitae blandit.

Sed id augue sagittis libero pellentesque malesuada in vel felis. Sed venenatis erat sit amet placerat pellentesque. Praesent varius elit ante, ac faucibus ex bibendum id. Quisque fermentum dui ac commodo tincidunt. Nullam eget enim elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam sit amet ipsum eros. Nunc eleifend posuere pharetra. Nunc lobortis ex lectus, nec posuere lectus ultricies quis. Sed viverra enim velit, sed efficitur nisl molestie vel. Mauris dui justo, gravida eu arcu rhoncus, euismod ornare neque. Nullam eget magna efficitur, vulputate erat et, porta neque. Quisque gravida faucibus odio, id ullamcorper libero pretium eget.

Cras in leo faucibus, tempor est id, malesuada erat. Proin congue diam eu eros pulvinar, non laoreet est egestas. Nam vel purus id nulla accumsan egestas. Etiam vitae erat nunc....

SCSS

body {
  margin: 0;
  padding: 0;
}
* {
   box-sizing: border-box;
}
.main {
  display: flex;
  height: 100vh;
  border: 1px solid #ddd;
  flex-direction: column;
  justify-content: space-between;
 
  .header, .footer {
    height: 64px;
    border: 1px solid #ddd;
  }
  
  .body {
    flex: 1;
    overflow: auto;
  }
}