JSFiddle - React, Tailwind, and code Playground

by ramapriya

HTML

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

CSS

#container {
    position: absolute;
    top:0;right:0;bottom:0;left:0;
}
.col { 
    display: inline-block;
    outline: 1px solid purple;
    overflow: hidden; 
    height: 100%;
}

JavaScript

function get_random_color() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.round(Math.random() * 15)];
    }
    return color;
}

var columns = 10, container = $("#container"), width = (100 / columns);

$("head").append("<style>.col { width: " + width + "%;} .row {  height: " + width + "%  }</style>");

for(var ii = 0; ii < columns; ii++) {
    container.append("<div class=\"row\" />");
    row = $("#container > div:last-child");
    
    for(var i = 0; i < columns; i++) {
        
        row.append("<div class=\"col\" style=\"background: " + get_random_color() + "\">sample</div>");
        
    }
}