JSFiddle - React, Tailwind, and code Playground

by SchmalzyB

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.4.1/moment-timezone-with-data-2010-2020.min.js"></script>
<div id="wc-container">
    <h2 id="wc-localtime"></h2>
    <table id="wc-timeline">
        <tbody>
            <tr>
                <td class="wc-dark">0</td>
                <td class="wc-dark">1</td>
                <td class="wc-dark">2</td>
                <td class="wc-dark">3</td>
                <td class="wc-dark">4</td>
                <td class="wc-dark">5</td>
                <td class="wc-dark">6</td>
                <td>7</td>
                <td>8</td>
                <td>9</td>
                <td>10</td>
                <td>11</td>
                <td>12</td>
                <td>13</td>
                <td>14</td>
                <td>15</td>
                <td>16</td>
                <td>17</td>
                <td class="wc-dark">18</td>
                <td class="wc-dark">19</td>
                <td class="wc-dark">20</td>
                <td class="wc-dark">21</td>
                <td class="wc-dark">22</td>
                <td class="wc-dark">23</td>
            </tr>
        </tbody>
    </table>
</div>

CSS

body{font-family: Calibri;}
#wc-container {
    border-top: 3px solid #d9d9d9;
    position: relative;
    margin: 0 auto;
}
#wc-localtime {
    color: #777;
    text-align:center;
    font-weight: 400;
    font-size: 20px;
    line-height: 34px;
    margin: 12px 0;
}
#wc-timeline {
    border-collapse: collapse;
}
#wc-timeline td {
    color: #666;
    border: 1px solid #ccc;
    height: 30px;
    width: 40px;
    max-width: 40px;
    text-align: center;
}
.wc-location-container {
    position: absolute;
    text-align: center;
    font-size: 14px;
    color: #666;
}
.wc-dark {
    background-color: #eee;
}

JavaScript

function setLocation(locTimeZone, elmId, totalWidth) {
    var elm = document.getElementById(elmId);
    var locTime = moment().tz(locTimeZone);
    var minutes = 60 * locTime.hours() + locTime.minutes();
    var offset = (minutes / (24.0 * 60)) * totalWidth;
    var elmOffset = offset - (elm.clientWidth / 2);
    elm.style.left = elmOffset + "px";
    elm.setAttribute('title', locTime.format("D MMM, H:mm z"));
}

function checkIfDivExists(localMoment){
    for (i = 0; i < timelineElms.length; i++) {
        if(timelineElms[i].id == localMoment.format("D MMM H:mm")) {
         	return i;   
        }
    }
    return -1;
}

function createNewLocationContainer(localMoment, plexusSite){
 	var newContainer = document.createElement( 'div' );
    newContainer.id = localMoment.format("D MMM H:mm");
    newContainer.className = 'wc-location-container';
    newContainer.innerHTML = '|<br>' + plexusSite.Abbr;
    timelineElms.push(newContainer);
}

var timelineElms = [];

(function () {
    var plexusSites = [{
        Name: 'Appleton',
        Abbr: 'APP',
        Zone: 'US/Central'
    }, {
        Name: 'Chicago',
        Abbr: 'CHI',
        Zone: 'US/Central'
    }, {
        Name: 'Boise',
        Abbr: 'BOI',
        Zone: 'US/Mountain'
    }, {
        Name: 'Boulder Design Center',
        Abbr: 'BDC',
        Zone: 'US/Mountain'
    }, {
        Name: 'Chicago',
        Abbr: 'CHI',
        Zone: 'US/Central'
    }, {
        Name: 'China Sourcing Office',
        Abbr: 'CSO',
        Zone: 'Asia/Chongqing'
    }, {
        Name: 'Darmstadt Design Center ',
        Abbr: 'DDC',
        Zone: 'Europe/Zurich'
    }, {
        Name: 'Global Headquarters',
        Abbr: 'GHQ',
        Zone: 'US/Central'
    }, {
        Name: 'Guadalajara ',
        Abbr: 'GDL',
        Zone: 'America/Merida'
    }, {
        Name: 'Hangzhou',
        Abbr: 'HGZ',
        Zone: 'Asia/Chongqing'
    }, {
        Name: 'Hangzhou-Lakeside ',
        Abbr: 'LAK',
        Zone:...