JSFiddle - React, Tailwind, and code Playground

HTML

<div id="timer">
    This is only valid for the next <input id="minutes" type="text" style="width: 14px; border: none; background-color:none; font-size: 16px; font-weight: bold;">  minutes and <input id="seconds" type="text" style="width: 26px; border: none; background-color:none; font-size: 16px; font-weight: bold;"> seconds.
</div>

JavaScript

var mins = 1;
var secs = mins * 60;

function Decrement() {
        minutes = document.getElementById("minutes");
        seconds = document.getElementById("seconds");
        if (seconds < 59) {
            seconds.value = secs;
        } else {
            minutes.value = getminutes();
            seconds.value = getseconds();
        }
        secs--;
    
    if(secs <= 0 && mins <= 0) {
           alert(11);
        return;
    }
    setTimeout(function() {Decrement()},1000);
}
function getminutes() {
    mins = Math.floor(secs / 60);
    return mins;
}
function getseconds() {
    return secs-Math.round(mins *60);
}

function countdown() {
    setTimeout(function() {Decrement()},1000);
}

countdown();