JSFiddle - React, Tailwind, and code Playground

by Kai Chan

HTML

<div id="container"></div>

CSS

.block {
    border:1px solid #333;
    margin-bottom:5px;
}

JavaScript

//    we will use a container to place our blocks.
//     fetch the element by id and store it in a variable.
var container = document.getElementById('container');

function block(mClass, html) {
    //extra html you want to store.
    return '<div class="' + mClass + '">' + html + '</div>';
}

//    code that loops and makes the blocks.
//    first part: creates var i
//    second:     condition, if 'i' is still smaller than three, then loop.
//    third part: increment i by 1;
for (var i = 0; i < 3; i++) {
    // append the result of function 'block()' to the innerHTML
    // of the container.
    container.innerHTML += block('block', 'data');
}