JSFiddle - React, Tailwind, and code Playground

HTML

<div class="page-wrapper">

  <div class="header-wrapper">
    <div class="header center">header</div>
  </div>
  
  <div class="content-wrapper">
    <div class="content center">
      <div class="blog">
        blog
      </div>
      <div class="sidebar">
        sidebar
      </div>
    </div>
  </div>  
  
  <div class="about-wrapper">
    <div class="about center">about</div>
  </div>
  
  <div class="footer-wrapper">
    <div class="footer center">footer</div>
  </div>
  
</div> <!-- end page-wrapper -->

CSS

.page-wrapper {
  width:100%;
  background-color: red;
}

.center {
     margin: 0 auto;
     width: 100px; 
}

.blog {
  float: left;
  width: 678px;
}

.sidebar {
  float: right;
  width: 300px;
}

.header-wrapper {background-color:yellow;width:100%;}
.content-wrapper {background-color:green;width:100%;}
.about-wrapper {background-color:gray;width:100%;}
.footer-wrapper {background-color:blue;width:100%;}

.header {
  width: 978px;
  background-color: red;
}

.content {
  width: 978px;
  background-color:blue;
}

.about {
  width: 978px;
  background-color: yellow;
}

.footer {
  width: 978px;
  background-color: green;
}