JSFiddle - React, Tailwind, and code Playground

by Will McKinley

HTML

<style>
        .row { width: 100%; clear: both; text-align: center; }
        .col { display: inline-block; min-height: 20px; min-width: 20px; padding: 8px 10px; background-color: #ededed; margin: 1px; }
        .col:hover { background-color: #333333; color: #ffffff; }
    </style>

    <input type="button" onClick="genDivs(6);" value="click me" /> 
    <div id="target"></div>

    <script language="javascript"> 
    function genDivs(rows,cols){ 
      var e = document.getElementById("target");
      cols = cols || rows;
      for(var r = 0; r < rows; r++) {
        var row = document.createElement("div");
        row.className = "row";
        for(var c = 0; c < cols; c++) {
           var col = document.createElement("div");
           col.className = "col";
           col.innerHTML = (r * rows) + c;
           col.innerHTML = getElement();
           row.appendChild(col);
        } 
        e.appendChild(row);
      } 
     }
     function getElement(){
        var elements = [ 
            "A",
            "B",
            "C"
        ]
        return elements[Math.floor(Math.random() * (elements.length))];
     }
    </script>