JSFiddle - React, Tailwind, and code Playground

by Jeff

HTML

<div class="grid grid-pad">
    <div class="col1"><div class="l1">1</div></div>
    <div class="col1"><div class="l1">1</div></div>
    <div class="col1"><div class="l1">1</div></div>
    <div class="col1"><div class="l1">1</div></div>
    <div class="col1"><div class="l1">1</div></div>
    <div class="col1"><div class="l1">1</div></div>
    <div class="col1"><div class="l1">1</div></div>
    <div class="col1"><div class="l1">1</div></div>
    <div class="col1"><div class="l1">1</div></div>
    <div class="col1"><div class="l1">1</div></div>
    <div class="col1"><div class="l1">1</div></div>
    <div class="col1"><div class="l1">1</div></div>
</div>
<div class="grid grid-pad">
    <div class="col2"><div class="l1">2</div></div>
    <div class="col2"><div class="l1">2</div></div>
    <div class="col2"><div class="l1">2</div></div>
    <div class="col2"><div class="l1">2</div></div>
    <div class="col2"><div class="l1">2</div></div>
    <div class="col2"><div class="l1">2</div></div>
</div>
<div class="grid grid-pad">
    <div class="col3"><div class="l1">3</div></div>
    <div class="col3"><div class="l1">3</div></div>
    <div class="col3"><div class="l1">3</div></div>
    <div class="col3"><div class="l1">3</div></div>
</div>
<div class="grid grid-pad">
    <div class="col4"><div class="l1">4</div></div>
    <div class="col4"><div class="l1">4</div></div>
    <div class="col4"><div class="l1">4</div></div>
</div>
<div class="grid grid-pad">
    <div class="col11"><div class="l1">11</div></div>
    <div class="col1"><div class="l1">1</div></div>
</div>
<div class="grid grid-pad">
    <div class="col10"><div class="l1">10</div></div>
    <div class="col2"><div class="l1">2</div></div>
</div>
<div class="grid grid-pad">
    <div class="col9"><div class="l1">9</div></div>
    <div class="col3"><div class="l1">3</div></div>
</div>
<div class="grid grid-pad">
    <div class="col8"><div class="l1">8</div></div>
    <div class="col4"><div...

CSS

body {
    margin:0px;
    font-family:Verdana;
}
*, *:after, *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
[class*='col'] {
    float: left;
    padding-right: 20px;
}
.l1{
    padding:8px;
    text-align:center;
    background:#EAEAEA;
    border-radius:8px;
}
.l2{
    padding:8px;
    text-align:center;
    background:#DADADA;
    border-radius:8px;
}
[class*='col']:last-of-type {
    margin-right: 0;
}
.col12 {
    width: 100%;
}
.col11{
    width: 91.66%;
}
.col10{
    width: 83.33%;
}
.col9{
    width: 75%;
}
.col8 {
    width: 66.66%;
}
.col7{
    width: 58.33%;
}
.col6 {
    width: 50%;
}
.col5 {
    width: 41.66%
}
.col4 {
    width: 33.33%;
}
.col3 {
    width: 25%;
}
.col2 {
    width: 16.66%;
}
.col1 {
    width: 8.33%;
}
.grid:after {
    content:"";
    display: table;
    clear: both;
}
.grid-pad:first-of-type {
    padding: 20px 0 20px 20px;
}
.grid-pad {
    padding: 0px 0 20px 20px;
}
.grid-pad >[class*='col']:last-of-type {
    padding-right: 20px;
}