JSFiddle - React, Tailwind, and code Playground

by ravan

HTML

<div id="container">
    <div id='d1'></div>
    <div id='d2'></div>
</div>

CSS

* {
    margin: 0;
    padding: 0;
}
html {
    width: 100%;
    overflow-x: hidden;
}
#container div {
    position: fixed;   
    width: 10px;
    height: 10px;
}
#d1 {
    background: yellow;
}
#d2 {
    background: green;
}

JavaScript

$(document).ready( function () {
    var w = $(document).width();
    var h = $(document).height();
    var size = 10;
    for (var top = 0, i = 0; top < h; top += size, i++) {
        for (var left = i%2?-25:0; left < w; left += size){
            id = (Math.random()*2|0)+1;
            $('#d'+id).clone().css({
                'left':left,
                'top':top
            }).appendTo($('#container'));
        }
    }
});