JSFiddle - React, Tailwind, and code Playground

by master1991

HTML

<div class ="tab-row">
<div class = "cell" style="width: 40%; border-left: 1px solid white; border-top: none;">1</div>
<div class = "cell" style="width: 30%">2</div>
<div class = "cell" style="width: 20%">3</div>

<div class = "cell-two" style="width: 40%; border-left: 1px solid;">4</div>
<div class = "cell-three" style="width: 30%">5</div>
<div class = "cell-three" style="width: 20%">6</div>

<div class = "cell-three-two" style="width: 30%">5</div>
<div class = "cell-three-two" style="width: 20%">6</div>

<div class = "cell-three" style="width: 30%">5</div>
<div class = "cell-three" style="width: 20%">6</div>

<div class = "cell-three-two" style="width: 30%">5</div>
<div class = "cell-three-two" style="width: 20%">6</div>



<div class = "cell-three" style="width: 20%; border-left: 1px solid;">7B</div>
<div class = "cell-three" style="width: 29.2%">8 </div>
<div class = "cell-three" style="width: 20%">9 </div>
<div class = "cell-three" style="width: 20%">10</div>

<div class = "cell-four" style="width: 20%; border-left: 1px solid;">7</div>
<div class = "cell-four" style="width: 29.2%">8 </div>
<div class = "cell-four" style="width: 20%">9 </div>
<div class = "cell-four" style="width: 20%">10</div>

<div class = "cell-five" style="width: 20%; border-left: 1px solid;">7</div>
<div class = "cell-five" style="width: 29.2%">8 </div>
<div class = "cell-five" style="width: 20%">9 </div>
<div class = "cell-five" style="width: 20%">10</div>

<div class = "cell-five" style="width: 20%; border-left: 1px solid;">7</div>
<div class = "cell-five" style="width: 29.2%">8 </div>
<div class = "cell-five" style="width: 20%">9 </div>
<div class = "cell-five" style="width: 20%">10</div>


<div class="row tab-row">
<div class = "cell-four" style="width: 2.05%; border-left: 1px solid; clear: both;">7C</div>
<div class = "cell-four" style="width: 41.35%">8 </div>
<div class = "cell-four" style="width: 5%">9 </div>
<div class = "cell-four" style="width: 11%">10</div>
<div class =...

CSS

.tab-row {
float: left;
max-width: 2480px;
width: 100%;
}

.cell {
border-right: 1px solid;
border-top: 1px solid;
float: left;
padding: 5px;
height: 50px;
}
.cell-two {
border-right: 1px solid;
border-top: 1px solid;
float: left;
padding: 5px;
height: 120px;
}
.cell-three {
border-right: 1px solid;
border-top: 1px solid;
float: left;
padding: 5px;
height: 15px;
}
.cell-three-two {
border-right: 1px solid;
border-top: 1px solid;
float: left;
padding: 5px;
height: 29px;
}
.cell-four {
border-right: 1px solid;
border-top: 1px solid;
float: left;
padding: 5px;
height: 25px;
}
.cell-five {
border-right: 1px solid;
border-top: 1px solid;
float: left;
padding: 5px;
height: 25px;
}
.cell-six {
border-right: 1px solid;
border-top: 1px solid;
float: left;
padding: 5px;
height: auto;
}
.row {
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
}