JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="row" style="margin:0;">
<div class="col-md-4" style="background:red; min-height:521px;"></div>
<div class="col-md-2" style="padding-left:0; padding-right:0; height:154px; border:4px solid red;"></div>
<div class="col-md-2" style="padding-left:0; padding-right:0; height:154px; border:4px solid red;"></div>
<div class="col-md-2" style="padding-left:0; padding-right:0; height:154px; border:4px solid red;"></div>
<div class="col-md-2" style="background:red; min-height:154px"> </div><br>
<div class="col-md-2" style="padding-left:0; padding-right:0; height:367px; border:4px solid red;"></div>
<div class="col-md-2" style="padding-left:0; padding-right:0; height:154px; border:4px solid red;"></div>
<div class="col-md-2" style="padding-left:0; padding-right:0; height:154px; border:4px solid red;"></div>
<div class="col-md-2" style="background:red; height:154px;"> </div><br>
<div class="col-md-2" style="padding-left:0; padding-right:0; height:213px; border:4px solid red;"></div>
<div class="col-md-2" style="padding-left:0; padding-right:0; height:213px; border:4px solid red;"></div>
<div class="col-md-2" style="background:red; min-height:213px"> </div>
<br>
</div>