JSFiddle - React, Tailwind, and code Playground

by Ramesh Kanagaraj

HTML

<div id='clock_container'></div>

CSS

.widget-clock-wrapper {
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    font-family: Lucida Grande, Segoe UI, Arial, sans-serif;
}
.widget-clock-nighttime {
    background-color: #202020;
    color: white;
}
.widget-clock-daytime {
    background-color: white;
    color:#202020;
}
.widget-clock-time-wrapper {
    font-size: 4em;
    text-align: center;
    line-height: 1em;
    font-family: Arial, sans-serif;
}
.widget-digital-clock-hours {
}
.widget-digital-clock-separator {
    font-size: 0.6em;
    vertical-align: top;
}
.widget-digital-clock-min {
}
.widget-digital-clock-meridiems {
    font-size : 0.5em;
}
.widget-digital-clock-timeZone {
    font-size:1.2em;
    text-align: center;
    padding-bottom: 0.3em;
}
.widget-digital-clock-date {
    font-size:1.2em;
    text-align: center;
}

JavaScript

function generateHTML(id) {
    var html = "<div id='widget_clock_wrapper_" + id + "' class='widget-clock-wrapper'><div class='widget-clock-time-wrapper' Id='widget_clock_time_wrapper_" + id + "' data-intervalID=''> <span id='widget_digital_clock_hours_" + id + "' class='widget-digital-clock-hours'></span><span id='widget_digital_clock_separator_" + id + "' class='widget-digital-clock-separator'>:</span> <span id='widget_digital_clock_min_" + id + "' class='widget-digital-clock-min'></span><span id='widget_digital_clock_meridiems_" + id + "' class='widget-digital-clock-meridiems'></span></div><div class='widget-digital-clock-timeZone' id='widget_digital_clock_timeZone_" + id + "'></div><div class='widget-digital-clock-date' id='widget_digital_clock_date_" + id + "'></div></div>";

    $("#clock_container").append(html);
}
timeFormat = 12;
Hour12 = 12;

function initClock(offset, workspaceWidgetID) {
    var intervalId = setInterval(function () {
        d = new Date();
        utc = d.getTime() + (d.getTimezoneOffset() * 60000);
        nd = new Date(utc + (60000 * offset));
        nd.toLocaleString();
        var clockTime = nd;
        var currentDate = clockTime.getDate();

        /*var currentTime = clockTime.setSeconds(clockTime.getSeconds() + 1);*/
        var convertedDate = nd; //new Date(currentTime);
        /*clockTime = convertedDate;*/
        var minutes = convertedDate.getMinutes();
        var format = "";
        var hours = convertedDate.getHours();
        var date = convertedDate.getDate();

        if (timeFormat == Hour12) {
            format = "AM";
            if (hours > 11) {
                format = "PM";
            }
            if (hours > 12) {
                hours = hours - 12;
            }
            if (hours === 0) {
                hours = 12;
            }
            $("#widget_digital_clock_meridiems_" + workspaceWidgetID).removeClass('hide');
        } else {
            $("#widget_digital_clock_meridiems_" +...