JSFiddle - React, Tailwind, and code Playground

by JThomas

HTML

<div class="grid">
    <div class="row">
        <div class="span1">Some Text here</div>
        <div class="span1">Some Text here</div>
        <div class="span1">Some Text here</div>
        <div class="span1">Some Text here</div>
        <div class="span1">Some Text here</div>
        <div class="span1">Some Text here</div>
        <div class="span1">Some Text here</div>
        <div class="span1">Some Text here</div>
        <div class="span1">Some Text here</div>
    </div>
    
    <div class="row">
        <div class="span2">Some Text here</div>
        <div class="span2">Some Text here</div>
        <div class="span2">Some Text here</div>
        <div class="span2">Some Text here</div>
        <div class="span1">Some Text here</div>
    </div>
    
    
    <div class="row">
        <div class="span3">Some Text here</div>
        <div class="span3">Some Text here</div>
        <div class="span3">Some Text here</div>
    </div>
</div>

CSS

body{
font-size: 16px;
}

.grid {
    width: 100%;
    display: table;
}
.grid .row{
    margin: 0;
}
.grid .row > * {
    float: left;
}
[class*="span"] {
    margin: 0.52083333333333333333333333333333% 0;
    margin-right: 0.52083333333333333333333333333333%;
    background-color: #3fa3f2;
}
.row [class*="span"]:first-child {
    margin-left: -5px;
}
.row [class*="span"]:last-child {
    margin-right: 0px;
}
.span1 {
    width: 9.4444444444444444444444444444444%
}
.span2 {
    width: 20.555555555555555555555555555556%
}
.span3 {
    width: 31.666666666666666666666666666667%
}
.span4 {
    width: 406.666px;
    width: 42.361%;
}
.span5 {
    width: 513.333px;
}
.span6 {
    width: 620px;
    width: 53.472%;
}
.span7 {
    width: 726.666px;
    width: 75.694%;
}
.span8 {
    width: 833.333px;
    width: 86.805%;
}
.span9 {
    width: 940px;
    width: 97.916%;
}