JSFiddle - React, Tailwind, and code Playground

by serebrov

HTML

<div class="app">
  <div class="top">
    Top bar
  </div>
  <div class="content">
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
  </div>
  <div class="bottom">
    Bottom bar
  </div>
</div>

CSS

.app {
  height: 100%;
}
.top {
  height: 35px;
  background: teal;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}
.top, .bottom {
  height: 35px;
  background: blue;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}
.content {
  position: fixed;
  top: 35px;
  bottom: 35px;
  left: 0;
  right: 0;
  overflow: auto;
}