JSFiddle - React, Tailwind, and code Playground

HTML

<script src="bootstrap"></script>
<div class="container-fluid">

   
  <div class="timer-settings well well-sm">
    <div class="row">
      <div class="col-xs-12 col-sm-6">   
      </div>
      <div class="col-xs-12 col-sm-6">
        <div class="button-control">
         <button id="stop-button" class="btn btn-danger">Stop</button>
         <button id="start-button" class="btn btn-info">Start</button>
        </div>
      </div>
    </div> <!-- End of row 1 -->

    <div class="row">
      <div class="col-xs-12 col-sm-6 col-sm-offset-6">
        <div class="control-text text-info">
          <p><span class="activity-text">ACTIVITY LENGTH</span> <span class="break-text">BREAK LENGTH</span></p>
        </div>
        <div class="input-div">
         <input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57' class="input-initial-time" id="input-box" value= 25 /> 
         <input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57' class="input-break-time" id="input-box2" value= 5 /> 
        </div>
      </div>
    </div> <!-- End of row 2 -->

  </div> <!-- End of timer-settings -->
  
    
    
  <div class="main-content">
    <div class="volume-control">
      <i id="sound-off-button" class="glyphicon glyphicon-volume-off"></i>
      <i id="sound-on-button" class="glyphicon glyphicon-volume-down"></i>
    </div>
    <div class="clockdiv" id="clock-div-id"><p id="count-down"></p>
    </div>
  </div>

</div> <!-- End of container-fluid -->

JavaScript

$(document).ready(function () {

    
      

      $("#start-button").on("click", function () {
        var field1 = document.getElementById("input-box");
        var field2 = document.getElementById("input-box2");
        if (field1.value == null || field2.value == null || field1.value == "" || field2.value == "") {
          alert("Please enter session length.");
        } else {
          initialTimer();
          $(this).attr("disabled","true");
        }
      });
      

      function initialTimer () {
        var inputInitialTime = $(".input-initial-time").val();
        initializing(inputInitialTime, true);
        $(".break-text").css("border-bottom", "none");
        $(".activity-text").css("border-bottom", "solid 2px #31708f");
      }
      function breakTime () {
        var inputBreakTime = $(".input-break-time").val();
        initializing(inputBreakTime, false);
        $(".activity-text").css("border-bottom", "none");
        $(".break-text").css("border-bottom", "solid 2px #31708f");
      }

      function initializing (input, running) {
        var minutesToSeconds = input*60;
        var workTime = running;
        updateClock();

        var startTimer = setInterval(updateClock,1000);
            function updateClock () {
              var t = countDownMinutes(minutesToSeconds);
              if (t.total <= 0 && workTime == true) {
                clearInterval(startTimer);
                breakTime();
              } else if (t.total <= 0 && workTime == false) {
                clearInterval(startTimer);
                initialTimer();
              }
              document.getElementById("count-down").innerHTML = (t.hours < 10 ? "0" : "") + t.hours + ":" + (t.minutes < 10 ? "0" : "") + t.minutes + ":" + (t.seconds < 10 ? "0" : "") + t.seconds;
              minutesToSeconds--;
            }
        $("#stop-button").on("click", function () {
          clearInterval(startTimer);
          $("#start-button").removeAttr("disabled");
       ...