JSFiddle - React, Tailwind, and code Playground

by jcubed111

HTML

<div class='groundZone'></div>

SCSS

@import url(https://fonts.googleapis.com/css?family=Inconsolata);

$colorGrad_1: #55ffe1;
$colorGrad_2: #4cefc7;
$colorGrad_3: #43e0ae;
$colorGrad_4: #3ad097;
$colorGrad_5: #32c180;
$colorGrad_6: #2bb16b;
$colorGrad_7: #24a158;
$colorGrad_8: #1e9246;
$colorGrad_9: #198236;
$colorGrad_10: #147327;
$colorGrad_11: #0f631b;
$colorGrad_12: #0b5410;
$colorGrad_13: #084408;
$colorGrad_13_5: #083808;
$colorGrad_14: #083008;

.groundZone{
    white-space: nowrap;
    font-family: Inconsolata;
    font-size: 16px;
    line-height: 16px;
    
    span{
        display: inline;
    }

    .groundLevel1{
        color: $colorGrad_14;
        background: $colorGrad_13;
    }
    
    .groundLevel2{
        color: $colorGrad_12;
        background: $colorGrad_11;
    }
}

JavaScript

function getRandomChar(){
    return String.fromCharCode(Math.floor(Math.random()*(126-33+1))+33);
}

function getRandomString(len) {
    var s = '';
    for(var i=0; i<len; i++) {
        s += getRandomChar();
    }
    return s;
}

var map = [
    [{1:22}, {2:196}, {1:32}],
    [{1:27}, {2:191}, {1:32}],
    [{1:31}, {2:187}, {1:32}],
    [{1:59}, {2:76}, {1:27}, {2:29}, {1:59}],
    [{1:64}, {2:66}, {1:32}, {2:25}, {1:63}],
    [{1:67}, {2:60}, {1:35}, {2:20}, {1:68}],
    [{1:250}]
];

for(var i=0; i<map.length; i++) {
    var el  = document.createElement('div');
    $('.groundZone').append(el);
    for(var j=0; j<map[i].length; j++) {
		var span = document.createElement('span');
        var key;
        for(level in map[i][j]) key = level;
        span.textContent = getRandomString(map[i][j][level]);
        span.className='groundLevel'+level;
        $(el).append(span);
    }
}