JSFiddle - React, Tailwind, and code Playground

by JamesKyle

HTML

<div class="row">
    <div class="col-3 push-1" style="background: blue">b</div>
    <div class="col-3" style="background: green">g</div>
    <div class="col-3" style="background: yellow">y</div>
</div>

SCSS

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box }

.row {
    width: 100%;
    max-width: 100%;
    min-width: 768px;
    margin: 0 auto
    .row {
        width: auto; max-width: none; min-width: 0; margin: 0 -15px;
        &.collapse { margin: 0 }
    }
    &.collpase [class|=".col"] { padding: 0 }
}

[class|="col"] {
    position: relative;
    float: left;
    min-height: 1px;
    padding: 0 15px;
    &.centered { float: none; margin: 0 auto }
    & + [class|="col"] {
        &:last-child { float: right }
        &.end { float: left }
    }
}

.col-1  { width:   8.33333% }
.col-2  { width:  16.66667% }
.col-3  { width:  25%       }
.col-4  { width:  33.33333% }
.col-5  { width:  41.66667% }
.col-6  { width:  50%       }
.col-7  { width:  58.33333% }
.col-8  { width:  66.66667% }
.col-9  { width:  75%       }
.col-10 { width:  83.33333% }
.col-11 { width:  91.66667% }
.col-12 { width: 100%       }

.row .off-1  { margin-left:   8.33333% }
.row .off-2  { margin-left:  16.66667% }
.row .off-3  { margin-left:  25%       }
.row .off-4  { margin-left:  33.33333% }
.row .off-5  { margin-left:  41.66667% }
.row .off-6  { margin-left:  50%       }
.row .off-7  { margin-left:  58.33333% }
.row .off-8  { margin-left:  66.66667% }
.row .off-9  { margin-left:  75%       }
.row .off-10 { margin-left:  83.33333% }
.row .off-11 { margin-left:  91.66667% }
.row .off-12 { margin-left: 100%       }

.push-1  {  left:   8.33333% }
.pull-1  { right:   8.33333% }
.push-2  {  left:  16.66667% }
.pull-2  { right:  16.66667% }
.push-3  {  left:  25%       }
.pull-3  { right:  25%       }
.push-4  {  left:  33.33333% }
.pull-4  { right:  33.33333% }
.push-5  {  left:  41.66667% }
.pull-5  { right:  41.66667% }
.push-6  {  left:  50%       }
.pull-6  { right:  50%       }
.push-7  {  left:  58.33333% }
.pull-7  { right:  58.33333% }
.push-8  {  left:  66.66667% }
.pull-8  { right:  66.66667% }
.push-9  {  left:  75%       }
.pull-9  { right:  75%...