JSFiddle - React, Tailwind, and code Playground

by justinbrown

HTML

<div id="grid">
<div class="cell empty">1</div>
<div class="cell empty">2</div>
<div class="cell empty">3</div>
<div class="cell empty">4</div>
<div class="cell empty">5</div>
<div class="cell empty">6</div>
<div class="cell empty">7</div>
<div class="cell empty">8</div>
</div>

SCSS

html, body {
    background-color: #DEDEDE;
    height: 100%;
    width: 100%;
}

#grid {
    background-color: #FF0000;
    display: -webkit-flexbox;
    -webkit-flex-flow: row wrap;
    padding: 1em;
    
    .cell {
        background-color: #464c86;
        border: 1px solid #DEDEDE;
        height: 50px;
        -webkit-flex: 2.0;
    }
}