JSFiddle - React, Tailwind, and code Playground

HTML

<button id="new-name">Create Codename</button>
<p id="codename">Your codename is: <div id="output"></div></p>
<p id="seed"></p>
<p id="comment"></p>

CSS

p,
div {
    font-size: 1.25em;
    max-width: 75%;
    font-family: Arial, Helvetica, sans-serif;
    margin: 1.25em auto;
}

#codename {
    display: none;
}

#output {
    font-family: "Lucida Console", Monaco, monospace;
    color: red;
}

JavaScript

var seed,
    seedArray;

$('#new-name').click( function() {
    var newName = "",
        seedTotal,
        seedYears;
    seed = "";
    seedArray = [];
    newName = addWord(newName);
    newName = addWord(newName);
    newName = addWord(newName);
    newName = addWord(newName);
    $('#output').text(newName);  
    seedTotal = seedArray[0] + ( seedArray[1] * 5000) + (seedArray[2] * 5000 * 5000) + (seedArray[3] * 5000 * 5000 * 5000);
    $('#seed').text("Your random seed is: (" + seed + ") or " + seedTotal); 
    seedYears = Math.floor( ((((seedTotal / 100000) / 60) / 60) / 24) / 365 );
    $('#comment').text("Starting from 0 and proceeding upwards incrementally at a rate of 100,000 guesses per second, it would take roughly " + seedYears +  " years to guess your codename.");
    $('#codename').show();
});

function pickWord() {
    var key = Math.floor( Math.random() * 5000 );
    
    if (seed === "") {
        seed = key + 1;
        seedArray[0] = key + 1;
    } else {
        seed = seed + ", " + (key + 1);
        seedArray[seedArray.length] = key + 1;
    }
    return dict[key];
}

function addWord(str) {
    if ( str === "") {
        str = pickWord();
    } else {
        str = str + ' ' + pickWord();        
    } 
    return str;
}

var dict =...