JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <p>Jehon's old JavaScript D'ni clock (date and time):</p>
    <p><span id="DniClock" title="D'ni date and time"></span></p>
    <p><span id="DniClockRoman"></span></p>
    <label><input type="checkbox" id="chkVileeNames" />Use vailee names</label>
    <label><input type="checkbox" id="chkPahrtahvotee" />Use pahrtahvotee instead of gahrtahvotee</label>
    <label><input type="checkbox" id="chkSpecial0" />Use special 0/25 hybrid digit</label>
    <p><br /></p>
    <p>The above should look <a href="https://i.imgur.com/DHCsOSe.png" target="_blank">something like this</a>.
        <br />
       If it doesn't, <a href="http://linguists.bahro.com/essentials/dnifonts.zip" target="_blank">download the required font (Dni_Script.ttf)</a>, install it, and reload this page.
    </p>
    <p><a href="http://www.mystwiki.com/wiki/D%27ni_Time_Units" target="_blank">Info on D'ni time units.</a></p>
</body>

CSS

body {
    background-color: #9dbbd9;
	color: black;
}
#DniClock {
    font-family: "D\'ni Script",Dnifont;
    font-size: 48px;
}
#DniClockRoman {
    font-family: Book Antiqua,Palatino,Palatino Linotype,Palatino LT STD,Georgia,serif;
    font-size: 40px;
}

JavaScript

// ***** JavaScript D'ni Clock *****
// Author: Jehon the Scribe (mail: Jehon[at]gmx.net)
// Site: http://jehon.mystfans.com (long dead)
// Last Update: 13.05.2002
// If you use this code somewhere, please give proper attribution
var vileeFullName = true; // show the vilee as digit (false) or as name like "lEfo" (true)
var usePartavotee = true; // show pahrtahvo (0-24) and tahvo5 (0-4) instead of gahrtahvo (0-4) and tahvo (0-24)
var special0 = false;     // use "cyclical" 0/25 hybrid digit ]/[ instead of plain zero ].[ for time?
var sep1 = '&bull;';      // separator for D'ni date digits (only if vileeFullName==false)
var sep2 = ' - ';         // separator between date and time
var sep3 = '&bull;';      // separator for D'ni time digits
var sep1r = '.';          // separator for romanized date digits (only if vileeFullName==false)
var sep2r = ' - ';        // separator between romanized date and time
var sep3r = ':';          // separator for romanized time digits
// DniNum[25] is the single 25 digit ]X[, and DniNum[26] the special 25/0 hybrid
var DniNum = new Array('0', '1', '2', '3', '4', '5', '6', '7', '8', '9', ')', '!', '@', '#', '$', '%', '^', '&', '*', '(', '[', ']', '{', '}', '\\', '|', ':');
var vileeScriptPrefix = 'lE';
var vileeScript = new Array('fo', 'bro', 'san', 'tar', 'vot', 'vofo', 'vobro', 'vosan', 'votar', 'novU');
var vileeNamesPrefix = 'Lee';
var vileeNames = new Array('fo', 'bro', 'sahn', 'tahr', 'vot', 'vofo', 'vobro', 'vosahn', 'votahr', 'novoo');

// reference date: 9656 leefo 1 0.0.0.0 = 2000-04-20 22:12:48 UTC
//var RefMillisec = Date.parse('2000-04-20') + ((22 * 60 + 12) * 60 + 48) * 1000;
//var RefHar = 9656;
// reference date: 9647 leefo 1 0.0.0.0 = 1991-04-21 17:54:00 UTC
// (time stamp on the original HyperCard Stack file for MYST) - source: RAWA
var RefMillisec = Date.parse('1991-04-21') + ((17 * 60 + 54) * 60 + 00) * 1000;
var RefHar = 9647;
var MillisecPerHar = 31556925216; // Mean Solar Tropical Year in 1995, source: RAWA
//var...