JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <BODY BGCOLOR="#ff6600">
        <div id="header" class="container">
            <div class="side left">hej</div><!-- /.left -->
            <div class="side right"></div><!-- /.right -->
        </div><!-- /#header -->
        
        <div id="main" class="container clearfix">
            <div class="content_left clearfix"></div><!-- /.content_left -->
            <div class="content_right clearfix"></div><!-- /.content_right -->
        </div><!-- /#main -->
        
        <div id="footer" class="container">
        </div><!-- /#footer -->
    </body>
</html>

CSS

.container {
    margin: 0 auto;    
}

#header {
  position: relative;
  width: 800px; height: 70px;
  background-color: blue;
}
    .side {
      position: absolute;
      width: 200px; height: 800px;
      background-color: pink;    
    }
        .left {
          left: -200px;
        }
        
        .right {
          right: -200px;   
        }

#main {
    width: 800px;
}

    .content_left {
        width: 500px; height: 1200px;
        float: left;
        background-color: green;
    }

    .content_right {
        width: 300px; height: 1200px;
        float: right;
    background-color: yellow;
    }

#footer {
    width: 800px; height: 25px;
    background-color: gray;
}

.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }