JSFiddle - React, Tailwind, and code Playground

by hito

HTML

<div class="box">&nbsp;</div>
<div class="box">&nbsp;</div>
<div class="box">&nbsp;</div>
<div class="box">&nbsp;</div>
<div class="box">&nbsp;</div>
<div class="box">&nbsp;</div>
<div class="box">&nbsp;</div>
<div class="box">&nbsp;</div>

CSS

.box {
    display:inline-block;
    vertical-align:top;
    width:100px;
    height:100px;
    border-radius: 8px;
    margin: 20px 0 0 20px;
    box-shadow: 0 0 3px rgba(0,0,0,0.7);
}
.box:nth-child(1){
    background:
        -webkit-linear-gradient(top , rgba(23, 176, 32, 0.96),rgba(46, 137, 21, 0.96)),
        url("http://assets.websters-lab.com/img/template/noise.jpg");
    background:
        -moz-linear-gradient(top , rgba(23, 176, 32, 0.96),rgba(23, 176, 32, 0.96)),
        url("http://assets.websters-lab.com/img/template/noise.jpg");
}
.box:nth-child(2){
    background: 
        -webkit-linear-gradient(top , rgba(40, 198, 48, 0.97), rgba(37, 123, 14, 0.97)), 
        url("http://assets.websters-lab.com/img/template/noise.jpg");
    background:
        -moz-linear-gradient(top , rgba(40, 198, 48, 0.97), rgba(37, 123, 14, 0.97)),
        url("http://assets.websters-lab.com/img/template/noise.jpg");
}
.box:nth-child(3){
    background:
        -webkit-linear-gradient(top , rgba(23, 176, 32, 0.91), rgba(46, 137, 21, 0.97)),
        url("http://assets.websters-lab.com/img/template/noise.jpg");
    background:
        -moz-linear-gradient(top , rgba(23, 176, 32, 0.91), rgba(46, 137, 21, 0.97)),
        url("http://assets.websters-lab.com/img/template/noise.jpg");
}
.box:nth-child(4){
    background:
        -webkit-linear-gradient(top , rgba(23, 176, 32, 0.97), rgba(46, 137, 21, 0.91)),
        url("http://assets.websters-lab.com/img/template/noise.jpg");
    background:
        -moz-linear-gradient(top , rgba(23, 176, 32, 0.97), rgba(46, 137, 21, 0.91)),
        url("http://assets.websters-lab.com/img/template/noise.jpg");
}
.box:nth-child(5){
    background:
        -webkit-linear-gradient(top , rgba(23, 176, 32, 0.93), rgba(46, 137, 21, 0.93)),
        url("http://assets.websters-lab.com/img/template/noise.jpg");
    background:
        -moz-linear-gradient(top , rgba(23, 176, 32, 0.93), rgba(46, 137, 21, 0.93)),
       ...