JSFiddle - React, Tailwind, and code Playground

by Pritam Bohra

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div class="container">
    <header class="header">header</header>
    <div class="main">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia corporis ratione, soluta officia tempore, deleniti, ut, enim repudiandae cupiditate quisquam eveniet. Harum repudiandae exercitationem ipsum dolorem magni, hic debitis pariatur eius tempore nostrum qui fugiat earum ipsam, doloremque delectus aliquid aspernatur animi corporis culpa perspiciatis fugit vel quod, voluptates, architecto labore. Quibusdam id voluptatibus delectus necessitatibus dignissimos nostrum neque quasi eos optio quo nisi iste hic, eius distinctio cum. Exercitationem dolor architecto odio repellendus, facilis corporis commodi, ea nihil, veritatis eum dignissimos. Ab molestiae, cum quae magnam beatae repellat consequatur odio est sed itaque. Nesciunt officia omnis quod cumque illo voluptatem dolore rem iure? Facilis quia animi ipsum veniam cumque expedita laudantium porro est quibusdam doloribus! Sunt obcaecati expedita quas, aut omnis! Odit, totam mollitia recusandae ipsam et sed atque facilis quaerat aliquid ex ipsum labore tempora tempore consectetur eveniet dignissimos veniam unde quia repellat quos autem error sequi aperiam perferendis. Laborum id distinctio, nostrum impedit eos nesciunt iure tempora magni vero commodi, tempore necessitatibus! Labore ut quam a repudiandae voluptates inventore iusto, neque vel accusantium iure repellendus rerum nemo, sint alias. Ex quas quo illo culpa, quam est mollitia itaque placeat minima. Possimus dolorem esse non voluptatem labore blanditiis vero mollitia sit eum, odit facilis dignissimos veritatis nemo veniam, ea tempore hic alias quam! Nostrum minus non inventore ipsum iusto consectetur dignissimos minima molestiae, incidunt, eligendi fuga ab. Asperiores necessitatibus, dicta laudantium impedit numquam, ab porro perspiciatis aliquid deserunt...

CSS

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

html, body {
  width: 100%;
  height: 100%;
}

.container  {
  /* display: flex; */
  /* flex-direction: column; */
}

.header {
  
  background-color: #bada55;
  height: 20vh
}
.main {
  /* flex-basis: 70%; */
  background-color: #fff;
  height: 70vh;
  overflow: auto;
}
.footer {
  /* flex-basis: 10%; */
  background-color: #bada55;
  height: 10vh;
}