JSFiddle - React, Tailwind, and code Playground

by CrossEye

HTML

<button onclick="run()">Test</button>
<div id="output"/>

JavaScript

var fonts = ['Arial', 'Helvetica', 'Georgia', 'Tahoma', 'Verdana'];
var weights = ['normal', 'bold', 'lighter'];
var sizes = ['16px', '20px', '24px', '36px', '40px'];

var choose = function(arr) {
    return arr[Math.floor(Math.random() * arr.length)];
};
var output = document.getElementById("output");



window.run = function() {
    var text = choose(sizes) + ' ' + choose(weights) + ' '  +  choose(fonts);
    output.innerHTML = '<div class="randomFont" style="font: ' + text + '">' + text + '</div>';
}