JSFiddle - React, Tailwind, and code Playground

HTML

<span id='m'>00</span><span>:</span><span id='s'>00</span>
<br>
<br>
<span id='dec'> <</span> <span id='inc'>></span> <button id='btn'>Start</button>
<p id="status">Click Start to Being Countdown Timer</p>

CSS

span {
    font-size: 30px; background-color: #eee;
    margin-left: 2px;
    padding: 3px;
    cursor: default; -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
button {
    vertical-align: top;
}
p {
    font-size: 25px;`
}

JavaScript

var m=getId('m'), s=getId('s'), btn=getId('btn'), status=getId('status'), inc =getId('inc') , dec =getId('dec'), interval=null, time=0, min=0;

btn.onclick = startCounter;
inc.onclick = incTime;
dec.onclick = decTime;

function startCounter() {

    if (time<=0) {
        status.textContent='Increase the timer first!';
        time=0;
        return;
    }
    status.textContent='Counting!';
    btn.textContent = 'Stop';
    btn.onclick = stopCounter;
    interval = setInterval(function(){
        time--;
        if (time<=0) {
            stopCounter();
            status.textContent='Time\'s Up';
        }
    setTime();        
    },200);
}

function stopCounter() {
    btn.textContent = 'Start';
    btn.onclick = startCounter;
    status.textContent='Stopped!';
    if (interval) clearInterval(interval);
}

function incTime(){
    time++;
    setTime();
}

function decTime(){
    time--;
    setTime();
}

function setTime() { 
        min= time/60;
        if (time<10) s.textContent= '0'+Math.floor(time%60);
        else s.textContent= Math.floor(time%60);
        if (min<0) m.textContent= '00';
        else if (min<10) m.textContent= '0'+Math.floor(min);
        else m.textContent= Math.floor(min);
}

function getId(x) {
    return document.getElementById(x);
}