JSFiddle - React, Tailwind, and code Playground

HTML

<div class="timer">
    <span class="minute">00</span>:<span class="second">00</span>
</div>

JavaScript

function gotimer() {
    var time = 0;
    var timer_id;
    var rate = 1000;

    function check() {
        if (secondcount <= 5) {
            console.log("under")
            rate = 1000;
            console.log("rate" + rate)
        } else if (secondcount >= 6 && secondcount <= 54) {
            console.log("between")
            rate = 300;
            console.log("rate" + rate)
        } else if (secondcount >= 55) {
            console.log("between")
            rate = 1000;
            console.log("rate" + rate)
        }
    }


    timer_id = setTimeout(timerTick, rate);

    function timerTick() {
        secondcount = parseInt($('.second').text());
        time++;
        generateTime();
        check();
        setTimeout(timerTick, rate);
    }

    this.getTime = function () {
        return time;
    }

    function generateTime() {
        var second = time % 60;
        var minute = Math.floor(time / 60) % 60;

        second = (second < 10) ? '0' + second : second;
        minute = (minute < 10) ? '0' + minute : minute;

        $('div.timer span.second').html(second);
        $('div.timer span.minute').html(minute);
    }
}

var timer;

$(document).ready(function (e) {
    timer = new gotimer
});