JSFiddle - React, Tailwind, and code Playground

by andrelaszlo

HTML

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

CSS

body {
    background-color: #036;
}
#container {
    width: 275px;
}
.item {
    font-family: sans;
    color: white;
    font-size: 10px;
    float: left;
    width: 10px;
    height: 10px;
    overflow: hidden;
    background-color: #000;
    margin: 0 1px 1px 0;
}

.item:first-child {
    visibility: hidden;
}

JavaScript

/*
 CSS (mostly) implementation of the Sieve of Eratosthenes. Well, at least all
 the sifting is done using CSS.

 Warning: it will be slow for N = 1000, and painfully slow for N = 10000.
*/

$(function(){
    var N = 500;
    var style = document.createElement('style');
    $("body").append(style);

    for (var i = 0; i < N; i++) {
        $("#container").append(
            $("<div class='item' title='" + (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;}");
    }
})