JSFiddle - React, Tailwind, and code Playground

by Dug Sohn

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/2.1.25/daterangepicker.css">
<script src="https://momentjs.com/downloads/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/2.1.25/daterangepicker.js"></script>
<br/>

<div class="container">
    	<div class="row">
            <div class="col-md-12">
           1
            </div>
        </div>
        <div class="row">
            <div class="col-md-3">
1            </div>
            <div class="col-md-7">
                <div class="row">
                    <div class="col-md-12">
1                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
1                    </div>
                    <div class="col-md-6">
1                    </div>
                </div>
            </div>
            <div class="col-md-2">
1            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
1            </div>
        </div>
	</div>

CSS

.row > div[class^="col-"] {
    box-shadow: inset 15px 0 0 #f5f5f5, inset -15px 0 0 #f5f5f5, inset 0 15px 0 #f5f5f5, inset 0 -15px 0 #f5f5f5;
    background-color: #fff;
    border: 1px solid #eee;
    padding: 15px 0;
    text-align:center;
    flex:1 0 0 ;
    min-height:100px
    }
    
    .row > div[class^="col-"] > .row {
    margin: -15px 0;
    }
    
        .row > div[class^="col-"] > .row:first-child {
    margin-bottom: 15px;
    }
    
    .row {
    display:flex;
    flex-direction:row;
}