JSFiddle - React, Tailwind, and code Playground

HTML

<span name="timerContainer">
<ul class="countdown" id="timer_9">
<li>
<span class="days time">00</span>
<p class="days_ref">days</p>
</li>
<li class="seperator"><span class="hidden-xs">&nbsp;.&nbsp;</span></li>
<li>
  <span class="hours time">00</span>
  <p class="hours_ref">hours</p>
</li>
<li class="seperator"><span class="hidden-xs">&nbsp;:</span></li>
<li>
  <span class="minutes time">00</span>
  <p class="minutes_ref">minutes</p>
</li>
<li class="seperator"><span class="hidden-xs">:</span></li>
<li>
  <span class="seconds time">00</span>
  <p class="seconds_ref">seconds</p>
</li>
</ul>
</span>


<button type="button" class="btn btn-default btn-xs" id="startTimer_9"><i class="fa fa-play"></i>&nbsp;&nbsp;Start Timer</button>&nbsp;
<button type="button"  class="btn btn-default btn-xs" id="pauseTimer_9"><i class="fa fa-pause"></i>&nbsp;&nbsp;Pause Timer</button>&nbsp;
 <button type="button"  class="btn btn-default btn-xs" id="resetTimer_9"><i class="fa fa-refresh"></i>&nbsp;&nbsp;Reset Timer</button>&nbsp;

CSS

/* Timer */
ul.countdown {
   list-style: none;
   margin: 50px 0 0;
   padding-top: 10;
   display: block;
   text-align: center;
}
ul.countdown li {
   display: inline-block;
	  border: none;
}
ul.countdown li span {
   font-size: 30px;
   font-weight: 300;
   line-height: 20px;
}
ul.countdown li.seperator {
   font-size: 30px;
   line-height: 20px;
   vertical-align: top;
}

JavaScript

// Define a global so we can clear it in our reset
var interval;

(function($) {

  // Define our plugins vars if they were not set
  $.fn.upCount = function(options, callback) {
    var settings = $.extend({
      startTime: null,
      offset: null,
      reset: null,
      resume: null
    }, options);

    // Save container
    var container = this,
      globalContainer = container.parent().html();

    // get the current date
    var currentDate = function() {
      var date = new Date();
      return date;
    };

    // Define some global vars
    var original_date = currentDate();
    var elapsed_time = container.data('elapsed');
    var target_date = new Date('12/31/2030 12:00:00'); // Count up to this date

    // Are we resetting our counter?
    if (settings.reset) {
      return reset();
    }

    // Do we need to start our counter at a certain time if we left and came back?
    if (settings.startTime) {
      resumeTimer(newDate);
    }
		
    // Lets resume from where we paused
    if (settings.resume) {
      // not sure how to continue from where we paused...
    }

    // Are we pausing the timer?
    if (settings.pause) {
      return clearInterval(interval);
    }

    // Reset the counter by destroying the element it was bound to
    function reset() {
      var timerContainer = $('[name=timerContainer]');
      container.data('elapsed', null);
      timerContainer.empty().append(globalContainer).find('.time').empty().append('00');
      clearInterval(interval);
    }

    // Given a start time, lets set the timer
    function resumeTimer(startTime) {
      original_date = startTime;
    }

    // Start the counter
    function countUp() {

      // Set our current date
      var current_date = currentDate();

      // difference of dates
      var difference = (current_date - original_date) + (elapsed_time || 0);
      container.data('elapsed', difference);

      if (current_date >= target_date) {
        // stop timer
       ...