JSFiddle - React, Tailwind, and code Playground

by InferOn

HTML

<div class="wrapper">
        <section class="main" id="main">
            
        </section>
    </div>

CSS

.wrapper {
            width: 960px;
            margin: 0 auto;
        }

        img, .shot {
            width: 292px;
            height: 219px;
            float: left;
            margin: 10px;
            background: #eee;
        }

        .clearFix{
            clear:both;

        }

JavaScript

var shot = function (src) {
            this.src = src;
        };

        var shots = [];

        shots.push(new shot('https://d13yacurqjgara.cloudfront.net/users/332776/screenshots/1567549/weather-dribbble.jpg'));
        shots.push(new shot('https://d13yacurqjgara.cloudfront.net/users/332776/screenshots/1588565/safari-yosemite-dribbble.jpg'));
        shots.push(new shot('https://d13yacurqjgara.cloudfront.net/users/332776/screenshots/1573950/browsers.jpg'));
        shots.push(new shot('https://d13yacurqjgara.cloudfront.net/users/332776/screenshots/1546946/blackclock-dribbble.jpg'));
        shots.push(new shot(''));
        shots.push(new shot(''));
        shots.push(new shot(''));
        shots.push(new shot(''));
        shots.push(new shot(''));

        function addShot(target, source) {
            var div = document.createElement('div');
            div.setAttribute('class', 'shot');
            var img = document.createElement('img');
            img.setAttribute('src', source.src);
            div.appendChild(img);
            target.appendChild(div);
        }
        function appendClear(target) {

            var div = document.createElement('div');
            div.setAttribute('class', 'clearFix');
            target.appendChild(div);
        }

        var target = document.getElementById('main');
        

        for (var i = 0; i < shots.length ; i++) {
            if(i >0 && i % 3 == 0){
                appendClear(target);
            }
            addShot(target, shots[i]);
        }