JSFiddle - React, Tailwind, and code Playground

by Alexus fox

HTML

<div id="container">

<div class= "puppy"><img src="http://www.pawderosa.com/images/puppies.jpg" alt="Smiley face" width="40" height="40"> </div>

 <div class= "puppy2">
<img src="http://blogs-images.forbes.com/kristintablang/files/2016/02/Uber-Puppies.jpg" alt="Smiley face" width="40" height="40"> </div>


 <div class= "puppy3">
<img src="http://blogs-images.forbes.com/kristintablang/files/2016/02/Uber-Puppies.jpg" alt="Smiley face" width="40" height="40"> </div>

</div>

CSS

.puppy1 {
    background:orange;
}

.puppy2 {
    background:blue;
}

.tile3 {
    background:green;
}

.puppy1, .puppy2, .puppy3 {
    width:40px;
    height:40px;
    float:left;
    border: 1px blue solid;
    position:realative;
}

body {
    position:absolute;
    width:100%;
    height:100%;
    margin:0;
    color:white;
    font-family: Arial;
}
#container {
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    background:#FFF;
    overflow:hidden;
}

JavaScript

for (var i = 1; i < 500; i++) {
    if (i == 20) {
        $('#container').append('<div class="puppy1"></div>');
    } else if (i == 4) {
        $('#container').append('<div class="puppy2"></div>');
    } else {
        $('#container').append('<div class="puppy3"></div>');
    }
}

function puppy1() {
    $('.puppy1').append('<div class="re]"></div>');
    $('.puppy1').append('<div class="puppy1"></div>');