JSFiddle - React, Tailwind, and code Playground

by ewoiloirowrowrnwono

HTML

<div class="header"></div>
<div class="sidebar"></div>
<div class="content">
    <div class="fixed"></div>
    <div class="contentfill"></div>
</div>
<div class="footer"></div>

CSS

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #ccc;
  height: 40px;
}
.sidebar {
  position: fixed;
  top: 40px;
  bottom: 30px;
  left: 0;
  width: 33.33%;
  background: #999;
}
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30px;
  background: #666;
}
.content {
  position: fixed;
  left: 33.33%;
  right: 0;
  top: 40px;
  bottom: 30px;
  overflow: auto;
  padding-top: 200px;
}
.contentfill {
  height: 2000px;
  background-image: url(http://static6.depositphotos.com/1011127/538/v/950/depositphotos_5382097-Retro-floral-seamless-pattern.jpg);
}
.fixed {
    background: none repeat scroll 0 0 rgba(255, 0, 0, 0.5);
    height: 200px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}