JSFiddle - React, Tailwind, and code Playground

by Roman Melnyk

HTML

<div id="container">
    <div class="s-header l-header">
        <sub>L</sub>\<sup>S</sup>
    </div>
</div>

CSS

html {
    height: 100%;
}
body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    font-size: 10px;
}
#container {
    height: 100%;
}
#container div {
    box-sizing: border-box;
    width: 8.33%;
    height: 8.33%;
    padding: .5em;
    float: left;
    text-align: center;
}
.s-header {
    border-bottom: 1px solid black;
}
.l-header {
    border-right: 1px solid black;
}

JavaScript

var container = document.getElementById('container'),
    createDiv = function (param) {
        var div = document.createElement('div');
        return div;
    };


for (var l = 110; l >= 0; l -= 10) {
    for (var s = 110; s >= 0; s -= 10) {
        (function () {
            var hsl = '(30, ' + s + '%, ' + l + '%)',
                div = createDiv();
            if (s === 110 && l === 110) return;
            if (s === 110) {
                div.className += ' l-header';
                div.innerText = l + '%';
            } else if (l === 110) {
                div.className += ' s-header';
                div.innerText = s + '%';
            } else {
                div.style.backgroundColor = 'hsl' + hsl;
                div.title = 'HSL' + hsl;
            }
            container.appendChild(div);
        })();
    }
}