JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<DIV CLASS="CONTAINER">
  <DIV CLASS="LEFT"></DIV>    
  <DIV CLASS="CENTER">
    <DIV CLASS="HEAD"></DIV> 
    <DIV CLASS="CONTENT"></DIV>
    <DIV CLASS="FOOTER"></DIV>
  </DIV>
  <DIV CLASS="RIGHT"></DIV>    
</DIV>
</body>

CSS

.CONTAINER {
    border:solid;
    border-color:red;
    padding:5px;
    width:400px;
}
.LEFT {
    float:left;
    border:solid;
    border-color:yellow;
    padding:5px;
    width:20px;
}
.CENTER {
    float:left;
    border:solid;
    border-color:blue;
    padding:5px;
    width:310px;
}
.RIGHT{
    float:left;
    border:solid;
    border-color:orange;
    padding:5px;
    width:20px;
}
.HEAD{
    border:solid;
    border-color:green;
    padding:5px;
    height:33px;
}
.CONTENT{
    border:solid;
    border-color:pink;
    padding:5px;
}
.FOOTER{
    border:solid;
    border-color:purple;
    padding:5px;
    height:33px;
}