JSFiddle - React, Tailwind, and code Playground

by Ulrich Bangert

HTML

<div id="outerwrapper">
    <div id="innerwrapper">
    </div>
</div>

CSS

#outerwrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}
#innerwrapper {
    display: flex;
    align-items: center;
    flex-direction: column;
}

JavaScript

for (var i = 0; i < 3; i++) {
    var currentlineimg = document.createElement("div");
    currentlineimg.className = "lineimg";
    for (var j = 0; j < 9; j++) {
        var im = document.createElement("img");
        im.src = "http://lorempixel.com/output/animals-q-c-50-50-" + (j+1) + ".jpg"
        currentlineimg.append(im);
    }
    innerwrapper.append(currentlineimg);
    var currentlinebtn = document.createElement("div");
    currentlinebtn.className = "linebtn";
    for (var j = 0; j < 10; j++) {
        var btn = document.createElement("button");
        btn.innerHTML = "BTN" + (i * 10 + j + 1);
        currentlinebtn.append(btn);
    }
    innerwrapper.append(currentlinebtn);
}