JSFiddle - React, Tailwind, and code Playground

by beneverard

HTML

<div class="wrapper">

    <div class="grids">
        <div class="grid-12 fullwidth">
            <p>awfiuewef</p>
        </div>
    </div>
    <div class="grids">
        <div class="grid-12">
            <p>awfiuewef</p>
        </div>
    </div>
    
    <div class="grids">
        <div class="grid-5">
            <p>awfiuewef</p>
        </div>
        <div class="grid-1">
            <p>awfiuewef</p>
        </div>
        <div class="grid-6">
            <p>awfiuewef</p>
        </div>
    </div>
    
</div>

CSS

/*
Page container
*/
.wrapper{
    max-width:960px;
    margin:0 auto;
    background-color: rgba(0, 255, 0, .1);
    padding: 50px 0;
}

/*
Column container
*/
.grids{
    width:auto;
    max-width:960px;
    clear:both;
    list-style:none; /* So we can make grids out of lists. */
    overflow:hidden; /* Clear the floats */
    background-color: rgba(255, 0, 0, .1);
}

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

@media(max-width:480px) {
    [class^="grid-"]{
        float: none;
        clearn: both;
        width: 100%;
        margin: 0;
    }
    [class^="grid-"]:first-child {
        margin:0;
    }
}
.grid-1{ width:6.25% }
.grid-2{ width:14.583% }
.grid-3{ width:22.917% }
.grid-4{ width:31.25% }
.grid-5{ width:39.583% }
.grid-6{ width:47.917% }
.grid-7{ width:56.25% }
.grid-8{ width:64.583% }
.grid-9{ width:72.917% }
.grid-10{ width:81.25% }
.grid-11{ width:89.583% }
.grid-12{ width:97.917%; margin:0; }
.fullwidth:first-child {
  width: 100%;        
    margin: 0;
}