JSFiddle - React, Tailwind, and code Playground

by soulwire

HTML

<a class="generate">Generate</a>
<span class="rnd"></span>

CSS

html, body {
    font-family: Consolas, "Courier New", Courier, monospace;
    text-align: justify;
    background: #1b1b1b;
    padding: 10px 20px;
}
.rnd {
    font-weight: 800;
    word-wrap: break-word;
    font-size: 22px;
    letter-spacing: -1px;
    line-height: 10px;
    color: #fff;
}
.generate {
    cursor: pointer;
    background: #000;
    display: inline-block;
    text-transform: uppercase;
    font-size: 13px;
    margin: 10px 0;
    color: #fff;
}

JavaScript

var sets = [ ['\\', '/'], /*['-', '_'], ['=', '+']*/ ];

function generate() {
    var t = '', set = sets.concat().splice( Math.floor( Math.random() * sets.length - 1 ), 1 )[0];
    for ( var i = 0; i < 10000; i++ ) t += Math.random() < 0.5 ? set[0] : set[1];
    $('.rnd').text(t);
}

$('.generate').click(function() { generate(); return false; });
generate();