JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
<div class="table-row row">
<div class="table-box col-xs-3">1</div>
<div class="table-box col-xs-3">2</div>
<div class="table-box col-xs-3">3</div>
<div class="table-box col-xs-3">4</div>
</div>
<div class="table-row row">
<div class="table-box col-xs-3">5</div>
<div class="table-box col-xs-3">6</div>
<div class="table-box col-xs-3">7</div>
<div class="table-box col-xs-3">8</div>
</div>
<div class="table-row row">
<div class="table-box col-xs-3">10</div>
<div class="table-box col-xs-3">11</div>
<div class="table-box col-xs-3">12</div>
<div class="table-box col-xs-3">13</div>
</div>
<div class="table-row row">
<div class="table-box col-xs-3">20</div>
<div class="table-box col-xs-3">21</div>
<div class="table-box col-xs-3">22</div>
<div class="table-box col-xs-3">23</div>
</div>
</div>
SCSS
$border: 1px solid grey;
.table-row {
border-bottom: $border;
&:last-child {
border-bottom: 0;
}
.table-box {
border-right: $border;
margin: 0.75rem 0;
&:last-child {
border-right: 0;
}
}
}