JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div>
  <h1>Current time is:</h1>
  <p id='current-time'></p>
  <h1>Shift started at:</h1>
  <p id='shift-started'></p>
  <h1>Shift ends at:</h1>
  <p id='shift-ends'></p>
  <h1>Progress:</h1>
  <progress id='progress'></progress>
</div>
</body>

JavaScript

var currentTimeElem = document.getElementById('current-time'),
    shiftStartedElem = document.getElementById('shift-started'),
    shiftEndsElem = document.getElementById('shift-ends');
    progressElem = document.getElementById('progress');

function Time(hours, minutes, seconds) {
  this.hours = ''+hours;
  this.minutes = ''+minutes;
  this.seconds = ''+seconds;
  for (key in this) {
    this[key] = this[key].length == 1 ? '0'+this[key] : this[key];
  }
}
Time.prototype.getString = function() {
  return this.hours+':'+this.minutes+':'+this.seconds;
};
Time.prototype.getSeconds = function() {
  return +this.hours*3600 + +this.minutes*60 + +this.seconds;
};

function formatTime(date) {
  var time = new Time(date.getHours(), date.getMinutes(), date.getSeconds());
  return time;
}

(function tick() {
  var nowDate = new Date(), startsDate, endsDate,
      now = formatTime(nowDate), starts, ends,
      inSeconds,
      progress,
      delta;

  inSeconds = now.getSeconds();
  startsDate = new Date(nowDate.getTime());
  endsDate = new Date(nowDate.getTime());
  if (inSeconds > 27000 && inSeconds < 70200) {
    startsDate.setHours(7,30,0,0);
    endsDate.setHours(19,30,0,0);
  } else {
    if (inSeconds >= 70200) {
      endsDate.setDate(endsDate.getDate()+1);
    } else {
      startsDate.setDate(startsDate.getDate()-1)
    }
    startsDate.setHours(19,30,0,0);
    endsDate.setHours(7,30,0,0);
  }
  starts = formatTime(startsDate);
  ends = formatTime(endsDate);

  delta = Math.floor((endsDate.getTime()-nowDate.getTime())/1000);
  progress = Math.floor(((43200-delta)/43200)*100)/100;

  currentTimeElem.innerHTML = now.getString();
  shiftStartedElem.innerHTML = starts.getString();
  shiftEndsElem.innerHTML = ends.getString();
  progressElem.value = progress;

  setTimeout(tick, 1000);
})();