JSFiddle - React, Tailwind, and code Playground

by Natcher86

HTML

<div class="container">
    <div class="wrap">        
        <div class="row">
            <div class="five col">
                <div class="panel">
                    <p>Five col</p>
                </div>
            </div>
            <div class="two col">
                <div class="panel">
                    <p>Two col</p>
                </div>
            </div>
            <div class="five col">
                <div class="panel">
                    <p>Five col</p>
                </div>
            </div>
        </div>
        
        <div class="row">
            <div class="six col">
                <div class="row">
                    <div class="two col">
                        <div class="panel">
                            <p>Two col</p>
                        </div>
                    </div>
                    <div class="two col">
                        <div class="panel">
                            <p>Two col</p>
                        </div>
                    </div>
                    <div class="two col">
                        <div class="panel">
                            <p>Two col</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="six col">
                <div class="row">
                    <div class="one col">
                        <div class="panel">
                            <p>One column</p>
                        </div>
                    </div>
                    <div class="one col">
                        <div class="panel">
                            <p>One column</p>
                        </div>
                    </div>
                    <div class="one col">
                        <div class="panel">
                            <p>One column</p>
                        </div>
                    </div>
                    <div class="one col">
                        <div class="panel">
                          ...

CSS

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; vertical-align: baseline; -webkit-text-size-adjust: none; }

.container { padding: 0; }

.wrap { margin: 0 auto; max-width: 1300px; position: relative; overflow: hidden; }

.row { margin: 0 1%; max-width: 1300px; position: relative; overflow: hidden; }

.row .row { min-width: 0; margin: 0;}

.row .row .col:first-child { margin-left: 0; }

.row .row .col:last-child { margin-right: 0; }

.col { float: left; min-height: 1px; position: relative; }

.col { margin-left: 2%; }

.row .one.col { width: 6%; }

.row .two.col { width: 14%; }

.row .three.col { width: 22%; }

.row .four.col { width: 30%; }

.row .five.col { width: 38%; }

.row .six.col { width: 46%; }

.row .seven.col { width: 54%; }

.row .eight.col { width: 62%; }

.row .nine.col { width: 70%; }

.row .ten.col { width: 78%; }

.row .eleven.col { width: 86%; }

.row .twelve.col { width: 94%; }

.row:before, .row:after, .clearfix:before, .clearfix:after { content: ""; display: table; }

.row:after, .clearfix:after { clear: both; }

.row, .clearfix { zoom: 1; }

img, object, embed { max-width: 100%; height: auto; }

img { -ms-interpolation-mode: bicubic; }

@media only screen and (min-width:  200px) { .wrap, .row { width: 200px; } }
@media only screen and (min-width:  250px) { .wrap, .row { width: 250px; } }
@media only screen and (min-width:  320px) { .wrap, .row { width: 320px; } }
@media only screen and (min-width:  350px) { .wrap, .row { width: 350px; } }
@media only screen...