JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.3/moment.min.js"></script>
<body>
    <div class="container">
         <h2 class="pageTitle">Destiny Public Events</h2>
        
        <div class="planetSelectWrapper">
          <label class='selectLabelWrapper'>
              <select id="planetSelect" name="planetSelect">
                  <option value='earth'>Earth: Old Russia</option>
                  <option value='moon'>Moon: Ocean of Storms</option>
                  <option value='venus'>Venus: Ishtar Sink</option>
                  <option value='mars'>Mars: Meridian Bay</option>
                </select>
            </label>
        </div>

        <div class="earthWrapper planetWrapper">
             <h3>Earth: Old Russia</h3>
             <img class='planetMapImage small' src='http://assets.vg247.com/current//2014/09/destiny_earth_old_russia_cosmodrome_map.jpg'/>

            <div class="earth info-box dark" data-offset="15" data-repeat="30" data-duration="10"> <span class="icon">
                <img src="http://img2.wikia.nocookie.net/__cb20140616234002/destinypedia/images/4/40/Explore_emblem.png"/>
            </span>
 <span class="countdown"></span>

                <div class="content">
                     <h4>The Steppes</h4>

                    <p>Defeat Extraction Crews</p>
                </div>
                <div class="progress">
                    <div class="progress-bar progress-bar-warning" role="progressbar"></div>
                </div>
            </div>
            <div class="earth info-box dark" data-offset="0" data-repeat="30" data-duration="0"> <span class="icon">
                <img...

CSS

body {
   background: #000;
   color: #fff;
    font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
}
.info-box {
    padding: 0px;
    margin: 5px 0px;
}
.info-box .icon {
    float: left;
    margin-right: 3px;
    padding: 0px 3px 0px 3px;
}
.info-box .icon > img {
    height: 80px;
}
.info-box .content {
    padding: 3px;
}
.info-box .progress {
    margin: 0px;
    height: 5px;
    border-radius: 0px;
    background-color: transparent;
}
.info-box .countdown {
    float: right;
    padding: 3px;
}
.dark {
    color: white;
    background-color: #2F344C;
}
.dark .icon {
    background-color: #2D4677;
}
img.planetMapImage {
  display: block;
  max-width: 100%;
  cursor: pointer;
}
select {
   background: #000;
    color: #fff;
}
select#planetSelect {
   font-size: 36pt;
    border: none;
    width: 100%;
    padding: 20px 10px;
    background: #000;
    color: #fff;
    padding-right: 100px;
}    
    label.selectLabelWrapper {position:relative}
    label.selectLabelWrapper:after {
        content:'<>';
        font:38px "Consolas", monospace;
        color:#fff;
        -webkit-transform:rotate(90deg);
        -moz-transform:rotate(90deg);
        -ms-transform:rotate(90deg);
        transform:rotate(90deg);
        right:8px; top:28px;
        padding:0 0 2px;
        border-bottom:1px solid #ddd;
        position:absolute;
        pointer-events:none;
    }
    label.selectLabelWrapper:before {
        content:'';
        right:6px; top:0px;
        width:20px; height:20px;
        background:#000;
        position:absolute;
        pointer-events:none;
        display:block;
    }
    select:active, label:active {
      border: none;   
    }
.pageTitle {
   font-size: 18pt;
    border-bottom: 1px solid #ccc;
    text-aling: center;
}
.planetWrapper h3 {
   display: none;   
}
.credit {
    font-size: 9pt;
    padding-top: 30px;
    text-align: center;
}

JavaScript

$(function () {
    function updateAllEvents() {
        $('.info-box').each(function () {
            var box = $(this);
            var countDown = box.find('.countdown');
            var progressBar = box.find('.progress-bar');
            var eventOffsetData = parseInt(box.data('offset'));
            var eventRepeatData = parseInt(box.data('repeat'));
            var eventDurationData = parseInt(box.data('duration'));
            var eventHappening = false;

            // eventStart represents the closest start time
            // get the start of the current hour
            // add when the event starts
            var eventStart = moment().startOf('hour').add(eventOffsetData, 'm');

            // add an hour so that it is in the future
            //WARN - probably bugged
            if (moment().diff(eventStart) > 0) {
                if (moment(eventStart).add(eventRepeatData, 'm').diff(eventStart) > 0) {
                    eventStart.add(eventRepeatData, 'm');
                } else {
                    eventStart.add(1, 'h');
                }
            }
            // WARN 'fix' for bug
            if (eventStart.diff(moment(), 'minutes') < 0) {
                eventStart.add(eventRepeatData, 'm');
            }

            var percent = Math.round((((eventRepeatData - eventStart.diff(moment(), 'minutes')) / eventRepeatData) * 100));

            //TODO check if in duration i.e. NOW
            eventHappening = false; //moment().add(eventDurationData, 'm').diff(eventStart, 'minutes') > 0; // gt means it's past

            if (eventHappening) {
                countDown.html("In progress");
                //box remove dark, use red 
            } else {
                countDown.html(eventStart.fromNow());
                progressBar.width(percent + "%");
            }

            $(this).data('percent', percent);
        });
        

        // Sort Planets
        $('.planetWrapper').each( function() {
           ...