JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
      <h1>COUNTDOWN</h1>
      <div class="inputs">
        <input type="text" id="hour" placeholder="HOUR" />

        <input type="text" id="min" placeholder="MINS" />
          
        <input type="text" id="sec" placeholder="SECS" />

        <input id="button" value="Change" type="button">
       </div>  
      <div id="countdown"><p id="countdowntext"></p></div>
      <span>For repeat click <a href="">here</a></span>
    </div>

CSS

.container {
    width: 300px;
    margin: auto;
    text-align: center;
}
.inputs{
  padding-bottom: 40px;
}
.inputs input{
  width: 27%;
  float: left;
  margin-left: 2%;
  margin-right: 2%;
  height: 22px;
  line-height: 22px;
  font-size: 22px;
  text-transform: uppercase;
  text-align: center;
}
#button{
  width: 150px !important;
  height: 30px !important;
  text-align: center !important;
  line-height: 15px !important;
  background-color: #c4261d ;
  color: white !important;
  border: 0 !important;
  margin-left: 75px !important;
  margin-top: 10px !important;
  cursor: pointer !important;
}

#countdown{
  font-size: 37px;
  background: #27ae60;
  color: #ecf0f1;
  -webkit-transition: background 0.5s ease-out;
  transition: background 0.5s ease-out;
  cursor: pointer;
  border-radius: 50%;
  height: 300px;
  text-align: center;
  -webkit-transition: background 0.5s ease-out;
  transition: background 0.5s ease-out;
}
.ended{
  background-color: #c0392b !important;  
}
.started{
  background-color: #27ae60 !important;
}
#countdowntext{
  padding-top: 60px;
}
.ended {
  background: #c0392b;
}

JavaScript

$(function() {
        
        var hours, minutes, seconds;
        var countdown = document.getElementById("countdown");
        current_date = new Date().getTime();


        
          /*var target_date = current_date + 10000;*/
          function count(){
            

            hour = $("#hour").val() * 3600 || 0;
            min = $("#min").val() * 60 || 300 ;
            sec = $("#sec").val() || 0;

            x_seconds = (hour+min+sec) * 1000;

            target_date = current_date+x_seconds;
            
          return target_date;
          }


          $("#button").click(count());
         

        var target_date = count();

      
      
        setInterval(function () {
            var current_date = new Date().getTime();     
            var seconds_left = (target_date - current_date) / 1000;
            
            if(seconds_left<0){
              $("#countdown").addClass("ended");
              $("#button").addClass("started");
               
            }else{
              hours = parseInt(seconds_left / 3600);
              seconds_left = seconds_left % 3600;
             
              minutes = parseInt(seconds_left / 60);
              seconds = parseInt(seconds_left % 60);
            }

            countdowntext.innerHTML =  hours + " hours <br /> "
            + minutes + " minutes <br />" + seconds + " seconds";  
         
      }, 1000);

      });