JSFiddle - React, Tailwind, and code Playground

by andrelaszlo

HTML

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

CSS

.item {
    font-family: sans;
    color: white;
    font-size: 10px;
    float: left;
    width: 15px;
    height: 15px;
    overflow: hidden;
    background-color: #000;
    outline: 1px dotted #faa;
    margin-right: 2px;
}

JavaScript

$(function(){
    var N = 100;
    var style = document.createElement('style');
    $("body").append(style);
      
    for (var i = 0; i < N; i++) {
        $("#container").append(
            $("<div class='item'>" + (i+1) + "</div>"));
        style.sheet.insertRule(
            ".item:nth-child(" + (i + 2) + ") {background-color: black;}");
        style.sheet.insertRule(
            ".item:nth-child(" + (i + 2) + "n) {background-color: white;}");
    }
})