JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container-fluid">
  <div class="row">
    <div class="col-md-12 head-block"></div>
    <div class="col-md-12 top-menu">
      <ul>
        <li><a href="#">Главная</a>
        </li>
        <li><a href="#">Услуги</a>
        </li>
        <li><a href="#">О нас</a>
        </li>
        <li><a href="#">Контакты</a>
        </li>

      </ul>
    </div>
    <div class="col-md-12 top-material"></div>
    <div class="col-md-3 left-sidebar">
        <div class="new_block"></div>
        <div class="new_block"></div>
    </div>
    <div class="col-md-6 content"></div>
    <div class="col-md-3 right-sidebar">
        <div class="new_block"></div>
        <div class="new_block"></div>
    </div>
  </div>
</div>

CSS

/*ЦВЕТ И ОТСТУП СНИЗУ ДЛЯ БЛОКОВ*/

* {
  margin: 0;
  padding: 0;
}
.head-block,
.top-menu,
.top-material,
.left-sidebar,
.right-sidebar,
.content {
  background: #ccc;
  margin-bottom: 1px;
}
/*ВЫСОТА ШАПКИ*/

.head-block {
  height: 150px;
}
/*ВЫСОТА МЕНЮ*/

.top-menu {
  height: 30px;
}
/*ВЫСОТА БЛОКА ВАЖНЫЕ МАТЕРИАЛЫ*/

.top-material {
  height: 200px;
}
/*ВЫСОТА САЙДБАРА И БЛОКА КОНТЕНТ*/

.left-sidebar,
.right-sidebar,
.content{
  height: 600px;
}
.left-sidebar,
.right-sidebar{padding:0}
.new_block{
  height: 300px;
  padding-right: 15px;
  padding-left: 15px;
}
.left-sidebar .new_block:first-child,
.right-sidebar .new_block:first-child{
  border-bottom: 1px solid #fff;
}

/*ГРАНИЦА У КОНТЕНТА*/

.content {
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
}

.top-menu {
  background: #daf2fe;
}
.top-menu ul {
  padding-left: 0;
  margin-bottom: 0;
}
.top-menu li {
  display: inline-block;
  margin-left: 10px;
  padding: 3px 10px;
}