JSFiddle - React, Tailwind, and code Playground

by Jeff

HTML

<div class="grid grid-pad">
    <div class="col1"><div>1</div></div>
    <div class="col1"><div>1</div></div>
    <div class="col1"><div>1</div></div>
    <div class="col1"><div>1</div></div>
    <div class="col1"><div>1</div></div>
    <div class="col1"><div>1</div></div>
    <div class="col1"><div>1</div></div>
    <div class="col1"><div>1</div></div>
    <div class="col1"><div>1</div></div>
    <div class="col1"><div>1</div></div>
    <div class="col1"><div>1</div></div>
    <div class="col1"><div>1</div></div>
</div>
<div class="grid grid-pad">
    <div class="col2"><div>2</div></div>
    <div class="col2"><div>2</div></div>
    <div class="col2"><div>2</div></div>
    <div class="col2"><div>2</div></div>
    <div class="col2"><div>2</div></div>
    <div class="col2"><div>2</div></div>
</div>
<div class="grid grid-pad">
    <div class="col3"><div>3</div></div>
    <div class="col3"><div>3</div></div>
    <div class="col3"><div>3</div></div>
    <div class="col3"><div>3</div></div>
</div>
<div class="grid grid-pad">
    <div class="col4"><div>4</div></div>
    <div class="col4"><div>4</div></div>
    <div class="col4"><div>4</div></div>
</div>
<div class="grid grid-pad">
    <div class="col6"><div>6</div></div>
    <div class="col6"><div>6</div></div>
</div>
<div class="grid grid-pad">
    <div class="col5"><div>5</div></div>
    <div class="col7"><div>7</div></div>
</div>
<div class="grid grid-pad">
    <div class="col4"><div>4</div></div>
    <div class="col8"><div>8</div></div>
</div>
<div class="grid grid-pad">
    <div class="col3"><div>3</div></div>
    <div class="col9"><div>9</div></div>
</div>
<div class="grid grid-pad">
    <div class="col2"><div>2</div></div>
    <div class="col10"><div>10</div></div>
</div>
<div class="grid grid-pad">
    <div class="col1"><div>1</div></div>
    <div class="col11"><div>11</div></div>
</div>
<div class="grid grid-pad">
    <div class="col12"><div>12</div></div>
</div>
<div class="grid grid-pad">
    <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;
}