JSFiddle - React, Tailwind, and code Playground

by hrabinowitz

HTML

<div class='container'>
  <div class='top'>top
  <p>
    top 2nd line
  </div>
  <div class='main'>
    main
    <p>a paragraph</p>
    <p> another p</p>
  </div>
  <div class='bottom'>bottom</div>
</div>

CSS

body { margin:0; /* This is used to reset any browser-default margins */ }

div.container {
    height:100vh;
    background:green;
    color:blue;
}

* {
  box-sizing: border-box;
}

html {
  display: block;
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
  background: blue;
}

.container: {
  display: flex;
  flex-direction: column;
  min-height: 100px;
  width: 100vw;
  height: 100vh;
  margin: 0;
}
.top {
  background-color: pink;
  height:50px;
  display: block;
}
div.main {
  flex-grow: 5;
  flex-basis: 0;
  background-color: orange;
  display: block;
  margin-bottom: 0;
}
.bottom {
  background-color: yellow;
  height: 80px;
  display: block;
  margin-top: 0;
}