JSFiddle - React, Tailwind, and code Playground
HTML
<header></header>
<div id="platformContainer">
<section id="platformContent">
<div id="platformBody">
<ul class="mainList">
<li class="mainStrip">Main Strip</li>
<li class="mainStrip">Main Strip</li>
<li class="mainStrip">Main Strip</li>
<li class="mainStrip">Main Strip</li>
<li class="mainStrip">Main Strip</li>
<li class="mainStrip">Main Strip</li>
<li class="mainStrip">Main Strip</li>
<li class="mainStrip">Main Strip</li>
<li class="mainStrip">Main Strip</li>
<li class="mainStrip">Main Strip</li>
<li class="mainStrip">Main Strip</li>
<li class="mainStrip">Main Strip</li>
<li class="mainStrip">Main Strip</li>
<li class="mainStrip">Main Strip</li>
<li class="mainStrip">Main Strip</li>
<li class="mainStrip">Main Strip</li>
<li class="mainStrip">Main Strip</li>
<li class="mainStrip">Main Strip</li>
<li class="mainStrip">Main Strip</li>
<li class="mainStrip">Main Strip</li>
<li class="mainStrip">Main Strip</li>
<li class="mainStrip">Main Strip</li>
<li class="mainStrip">Main Strip</li>
<li class="mainStrip">Main Strip</li>
<li class="mainStrip">Main Strip</li>
<li class="mainStrip">Main Strip</li>
<li class="mainStrip">Main Strip</li>
<li class="mainStrip">Main Strip</li>
<li class="mainStrip">Main Strip</li>
<li class="mainStrip">Main Strip</li>
<li class="mainStrip">Main Strip</li>
<li class="mainStrip">Main Strip</li>
<li class="mainStrip">Main Strip</li>
<li...
CSS
header{
background: lavender;
position: fixed;
width: 100%;
height: 70px;
z-index: 999;
}
#platformContainer{
position: relative;
top: 70px;
width: 100%;
}
#platformContainer #platformContent{
float: left;
width: 100%;
display: block;
}
#platformContainer #platformContent #platformBody{
margin-right: 200px;
}
#platformContainer #platformContent #platformBody ul{
}
#platformContainer #platformContent #platformBody ul li{
height: 55px;
width: 100%;
background: #49a1e5;
}
#platformContainer #toolBarContainer{
float: left;
width: 200px;
margin-left: -200px;
margin-bottom: 70px;
position: relative;
background: #2266A8;
}
#platformContainer #toolBarContainer #toolBarContent{
height: 100%;
position: fixed;
width: 200px;
}
#platformContainer #toolBarContainer #toolBarContent ul#toolBarList{
height: 200px;
overflow-y: auto;
background: #2266A8;
}
#platformContainer #toolBarContainer #toolBarContent ul#toolBarList li{
width: 100%;
height:40px;
display: block;
background: #2266A8;
}
#platformContainer footer{
clear: left;
height: 70px;
width: 100%;
background: #2266A8;
}