JSFiddle - React, Tailwind, and code Playground

HTML

<body onload="run()">

<div id="output"/>
</body>

CSS

.font1 {font-family:Verdana, Geneva, sans-serif;} .font2 {font-family:Georgia, "Times New Roman", Times, serif;} .font3 {font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;} .font4 {font-family:"Times New Roman", Times, serif;} .font5 {font-family:"Comic Sans MS", cursive;}

JavaScript

var fonts = ['font1', 'font2', 'font3', 'font4', 'font5'];
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");

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