JSFiddle - React, Tailwind, and code Playground

by Vitaliy Ivanov

HTML

Первый таймер:
<div id="timr_main t_two">
  <div class="h_two">
    <div class="n_two">
      <span id="hours"></span>
    </div>
    час
  </div>
  <div class="m_two">
    <div class="n_two">
      <span id="minutes"></span>
    </div>
    мин
  </div>
  <div class="s_two">
    <div class="n_two">
      <span id="seconds"></span>
    </div>
    сек
  </div>
</div>

<hr>
Второй таймер:
<div id="timr_main t_three">
  <div class="h_two">
    <div class="n_two">
      <span id="hours2"></span>
    </div>
    час
  </div>
  <div class="m_two">
    <div class="n_two">
      <span id="minutes2"></span>
    </div>
    мин
  </div>
  <div class="s_two">
    <div class="n_two">
      <span id="seconds2"></span>
    </div>
    сек
  </div>
</div>

CSS

#t_two,{
    color:#F6F4F3;
    text-align:center;
    text-transform:uppercase;
    font-family:"Lato",sans-serif;
    font-size:10px;
}
#t_two h1{ 
    color:#E32442; 
    font-size: 14px;
    line-height: 28px;
}
.d_two,.h_two,.m_two,.s_two{
    display:inline-block;
    padding:5px;
    width:40px;
    border-radius:2px
}
.d_two{
    background:#EF2F3C;
}
.h_two{
    background:#EF2F3C;
}
.m_two{
    background:#276FBF;
}
.s_two{
    background:#F0A202;
}
.n_two{
    font-family:"Montserrat",sans-serif;
    color:#183059;
    font-size:15px;
}

JavaScript

function initializeTimer(seconds,format,after_text_on,id_div_text,div_text,id_seconds,id_minutes,id_hours,id_days) {
  countDown = function(){
    if (seconds > 0) {
      var minutes = seconds/60; 
      var hours = minutes/60;
      var days = hours / 24;
      minutes = (hours - Math.floor(hours)) * 60; 
      days = Math.floor(days);
      hours =  Math.floor(hours)- days * 24; 

      seconds = Math.floor((minutes - Math.floor(minutes)) * 60); 
      minutes = Math.floor(minutes); 

      setTimePage(days,hours,minutes,seconds,format,id_seconds,id_minutes,id_hours,id_days); 

      function secOut() {
        if (seconds == 0) { 
          if (minutes == 0) { 
            if (hours == 0) { 
              if(days == 0){
                if (after_text_on == 1) {
                  document.getElementById(id_div_text).innerHTML = div_text;
                }else{
                  setTimePage(0,0,0,0,format,id_seconds,id_minutes,id_hours,id_days);
                } 
                clearInterval(timerId);
              }
              else{
                days--; 
                hours = 24; 
                minutes = 59; 
                seconds = 59; 
              }
            }
            else {
              hours--; 
              minutes = 59; 
              seconds = 59; 
            }
          }
          else {
            minutes--; 
            seconds = 59; 
          }
        }
        else {
          seconds--; 
        }
        setTimePage(days,hours,minutes,seconds,format,id_seconds,id_minutes,id_hours,id_days); 
      }
      timerId = setInterval(secOut, 1000) 
    }
    else {
      if (after_text_on == 1) {
        document.getElementById(id_div_text).innerHTML = div_text;
      }else{
        setTimePage(0,0,0,0,format,id_seconds,id_minutes,id_hours,id_days);
      }       
    }
  }
  function setTimePage(d,h,m,s,format,id_seconds,id_minutes,id_hours,id_days) { 
    var days = document.getElementById(id_days);
    var hours =...