JSFiddle - React, Tailwind, and code Playground

by gene

HTML

<pre class="container"></pre>

CSS

.container {
    font-family: monospace;
}

.item {
    padding-bottom: 4px;
    border-bottom: 1px solid grey;
}

JavaScript

Math.rnd = function(n) { return Math.floor(Math.random()*n) + 1; }

Array.prototype.random = function() {
    var len = this.length;
    var rnd = Math.rnd(this.length)-1;
    var item = this[rnd];
    if (typeof item == 'undefined')
        console.log("a=" + this + "; len=" + len + "; rnd=" + rnd);
                    
    return item;
}
        
function pad(num, size) {
    var s = num+"";
    while (s.length < size) s = "0" + s;
    return s;
}

var specials = ['!', '$', '*', '(', '\'', '_', '+', '%'];
var capitals = [];
for (var lt = 0; lt < 26; lt++ )
    capitals.push(String.fromCharCode(65 + lt));
var numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

function separator(i) {
    var a;
    if (i == 0)
        a = specials;
    else if (i == 1)
        a = numbers;
    else
        a = capitals;
    return a.random();
}

var $container = $('.container');
var groups;
for(var i=0; i<50; i++) {
    var $line = $('<div class="item">');
    for (var j=0; j<3; j++) {
        var s = separator(j);
        var p = Math.rnd(98);
        var l = Math.rnd(39);
        var w = Math.rnd(9);
        var key = s + ' ' + pad(p, 2) + ' ' + pad(l, 2) + ' ' 
            + pad(w, 2) + '  ';
        $line.append($('<span>').text(key)); 
    }
    $container.append($line);
}