JSFiddle - React, Tailwind, and code Playground

by beneverard

HTML

<div class="wrapper">
    <div class="grids">
        <div class="grid-12">fsdf</div>
    </div>
    <div class="grids">
        <div class="grid-11">fsdf</div>
        <div class="grid-1">fsdf</div>
    </div>
    <div class="grids">
        <div class="grid-10">fsdf</div>
        <div class="grid-2">dsfdsf</div>
    </div>
    <div class="grids">
        <div class="grid-9">fsdf</div>
        <div class="grid-3">dsfdsf</div>
    </div>
    <div class="grids">
        <div class="grid-8">fsdf</div>
        <div class="grid-4">dsfdsf</div>
    </div>
    <div class="grids">
        <div class="grid-7">fsdf</div>
        <div class="grid-5">dsfdsf</div>
    </div>
    <div class="grids">
        <div class="grid-6">fsdf</div>
        <div class="grid-6">dsfdsf</div>
    </div>
    <div class="grids">
        <div class="grid-5">fsdf</div>
        <div class="grid-7">dsfdsf</div>
    </div>
    <div class="grids">
        <div class="grid-4">fsdf</div>
        <div class="grid-8">dsfdsf</div>
    </div>
    <div class="grids">
        <div class="grid-3">fsdf</div>
        <div class="grid-9">dsfdsf</div>
    </div>
    <div class="grids">
        <div class="grid-2">fsdf</div>
        <div class="grid-10">dsfdsf</div>
    </div>
    <div class="grids">
        <div class="grid-1">fsdf</div>
        <div class="grid-11">dsfdsf</div>
    </div>
</div>

CSS

.wrapper{
    width:980px;
    padding:0;
    margin:0 auto;
}

/*
Column container
*/
.grids{
    width:auto;
    width:980px;
    clear:both;
    margin:0 0 0 -0.61%;
    list-style:none; /* So we can make grids out of lists. */
    overflow:hidden; /* Clear the floats */
}

[class^="grid-"]{
    float:left;
    margin:0 0.61% 0 0;
    background-color: rgba(0,0,255, .1);
}
.grids [class^="grid-"]{
    margin:0 0 0 0.61%;
}
.grids [class^="grid-"]:last-child{
    margin:0;
}

.grid-1{ width:7.772% }
.grid-2{ width:16.156% }
.grid-3{ width:24.39% }
.grid-4{ width:32.724% }
.grid-5{ width:41.057% }
.grid-6{ width:49.39% }
.grid-7{ width:57.724% }
.grid-8{ width:66.057% }
.grid-9{ width:74.39% }
.grid-10{ width:82.724% }
.grid-11{ width:91.057% }
.grid-12{ width:100%; }