JSFiddle - React, Tailwind, and code Playground

HTML

<div class="date">
    <div id="d-month">May</div>
    <div id="d-day">26</div>
    <div id="d-year">2015 </div>
    <div id="d-time">09:19</div> 
</div>


<div class="date-counter">
    <div class="counter">
        <span id="countdown-day" class="number">00</span>
        <span class="month">Days</span>
    </div>
    <div class="counter">
        <span id="countdown-hour" class="number">00</span>
        <span class="month">Hours</span>
    </div>
    <div class="counter">
        <span id="countdown-min" class="number">00</span>
        <span class="month">Minutes</span>
    </div>
    <div class="counter">
        <span id="countdown-sec" class="number">00</span>
        <span class="month">Seconds</span>
    </div>    
</div>

SCSS

body {
    font-family: sans-serif;
    -webkit-font-smoothing: antialiased;
    margin: 0;
    padding: 0;
    background: DodgerBlue;
}
.date, .date-counter {
    width: 100%;
    padding: 10px 0;
    text-align: center;
}
.date {
    div {
        display: inline-block;
        margin: 0 5px;
        color: white;
    }
}

.date-counter {
    .counter {
        display: inline-block;
        width: 50px;
        height: 50px;
        margin: 5px;
        padding: 25px;
        background: white;
        color: #444;
        border-bottom: 4px solid RoyalBlue;
        border-radius: 8px;
        span {
            display: block;
            &.number { font-size: 25px; }
            &.month { 
                color: DodgerBlue;
                font-size: smaller; 
            }
        }
    }
}

JavaScript

$(document).ready(function() {
  var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
  var d = new Date();
  var month = monthNames[d.getMonth()];
  var day = d.getUTCDate();
  var year = d.getUTCFullYear();

  var eMonth = $("#d-month").text();
  var eDay = $("#d-day").text();
  var eYear = $("#d-year").text();

  var tDate = month + " " + day + " " + year;
  var eDate = eMonth + " " + eDay + " " + eYear;
    tDate = jQuery.trim(tDate);
    eDate = jQuery.trim(eDate);
    console.log(jQuery.trim(tDate));
    console.log(jQuery.trim(eDate));

 // alert("today's date: " + tDate + " event's date: " + eDate);

  if(tDate == eDate) {
    alert('Today is the event!');
    return false;
    // clearTimeout( countDown.prototype.update() );
  } else {
    counter();
  }
    
  function counter() {
    function countDown(initDate, id) {
      this.counterDate = new Date(initDate);
      this.update();
    }
    countDown.prototype.calculateUnit=function(secDiff, unitSeconds){
      var tmp = Math.abs((tmp = secDiff/unitSeconds)) < 1? 0 : tmp;
      return Math.abs(tmp < 0 ? Math.ceil(tmp) : Math.floor(tmp));
    }
    countDown.prototype.calculate=function(){
      var secDiff = Math.abs(Math.round(((new Date()) - this.counterDate)/1000));
      this.days = this.calculateUnit(secDiff,86400);
      this.hours = this.calculateUnit((secDiff-(this.days*86400)),3600);
      this.mins = this.calculateUnit((secDiff-(this.days*86400)-(this.hours*3600)),60);
      this.secs = this.calculateUnit((secDiff-(this.days*86400)-(this.hours*3600)-(this.mins*60)),1);
    }
    countDown.prototype.update=function(){ 
      this.calculate();
      $("#countdown-day").html(this.days + (this.days == 1));
      $("#countdown-hour").html(this.hours + (this.hours == 1));
      $("#countdown-min").html(this.mins + (this.mins == 1));
      $("#countdown-sec").html(this.secs + (this.secs == 1));
      var self =...