JSFiddle - React, Tailwind, and code Playground

by zeen

HTML

<div id="chess"></div>

CSS

* {
    box-sizing: border-box;
}
#chess {
    border: 10px solid #000;
    width: 260px;
}
.col {
    width: 30px;
    height: 30px;
    background: red;
    float: left;
}
.col:nth-child(-2n+8) {
    background: green;
    
}

JavaScript

var chess = document.getElementById('chess');
console.log(chess);
function createTable() {
    var i, s = "";
    for(i=0;i<64;i+=1) {
        s += '<div class="col"></div>';
    }
    s += '<div style="clear:both"></div>';
    chess.innerHTML = s;
}
createTable();