JSFiddle - React, Tailwind, and code Playground

by not important

HTML

<div class="time-readout" id="yearcode"></div>
<div class="time-readout" id="timecode"></div>

CSS

.time-readout {
    font-family:Helvetica, Arial;
    text-align: center;
    font-weight: bold;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
    font-size: 32px;
    color: #333;
}

JavaScript

(function () {
    var getYearcode = function () {
        var currentTime = new Date(),
            years = makeTimeString(currentTime.getFullYear(), 4),
            months = makeTimeString(currentTime.getMonth(), 2),
            days = makeTimeString(currentTime.getDate(), 2);
        return years + months + days;
    };

    var getTimecode = function () {
        var currentTime = new Date(),
            hours = makeTimeString(currentTime.getHours(), 2),
            minutes = makeTimeString(currentTime.getMinutes(), 2),
            seconds = makeTimeString(currentTime.getSeconds(), 2),
            milliseconds = makeTimeString(currentTime.getMilliseconds(), 4);
        return hours + minutes + seconds + milliseconds;
    };

    var makeTimeString = function (value, format) {
        for (var i = 0, buffer = ''; i < format; i += 1, buffer += '0') {}
        return ('' + buffer + value).substr(0 - format);
    };

    $(function () {
        var $timecode = $('#timecode'),
            updateFrequency = 1000 / 12;
        
        $('#yearcode').text(getYearcode());

        setInterval(function () {
            $timecode.text(getTimecode());
        }, updateFrequency);
    });
})();