JSFiddle - React, Tailwind, and code Playground

by igalst

HTML

<button type="button" id="button">Draw</button>

CSS

.box {
    width: 100%;
    height: 100%;
    padding: 10px;
}

body > .box {
    width: 150px;
    height: 150px;
}

JavaScript

$("#button").on("click", function() {
    var bgColors = [
        "red",
        "blue",
        "green",
        "#FED",
        "#DED",
        "#BED"
    ];
    
    var box;
    
    for(var i = 0; i< bgColors.length; i++) {
        if (i === 0) {
             box = "body";
         }

        box = $("<div></div>").addClass("box").css("background-color", bgColors[i]).appendTo(box);
   
    }

});