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 now, 
      starts, 
      ends,
      progress;

  calculate();
  render();
  setTimeout(tick, 1000);

  function calculate() {
    var nowDate = new Date(),
        startsDate,
        endsDate;
    now = formatTime(nowDate);

    calculateStartEnd();
    calculateProgress();

    function calculateStartEnd() {
      var 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);
    }

    function calculateProgress() {
      var delta = Math.floor((endsDate.getTime()-nowDate.getTime())/1000);
      progress = Math.floor(((43200-delta)/43200)*100)/100;
    }
  }

  function render() {
    currentTimeElem.innerHTML = now.getString();
   ...