JSFiddle - React, Tailwind, and code Playground

by kuonyuu

HTML

<div class="bgRepeat" style="background: url('http://i.imgur.com/exZM3qV.png') 0 0 no-repeat;"></div>

<div class="warp">
<img src="http://i.imgur.com/yhSDzcR.jpg" class=sq><img src="http://i.imgur.com/yhSDzcR.jpg" class=sq><img src="http://i.imgur.com/yhSDzcR.jpg" class=sq><img src="http://i.imgur.com/yhSDzcR.jpg" class=sq>    
</div>

CSS

*, div, img
{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

div
{
    vertical-align: top;
}

.bgRepeat
{
    height: 200px;
    width: 600px;
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
}

.warp
{
    width: 200px;
    height: 200px; 
    border: 1px solid black; 
    padding: 2px 1px 1px 2px;
}

.sq
{
    vertical-align: top;
    width: 48%;
    height: 48%;
    margin: 1% 0 0 1%;
}