JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <div id="myTimer"></div>
    <button type="button" id="myBtn" class="btnDisable" disabled onclick="alert('Success!')">Download</button>
</div>

CSS

#wrapper {
 text-align:center; 
    border:1px solid #7f7f7f;
    width:150px;
    margin:25px auto;
    padding:25px;
    background-color:#fe9;
}

#myTimer {
font:64px Tahoma bold;
    padding:20px;
    display:block;
}

.btnEnable {
 background-color:#efefef; 
    border:1px solid #ababab;
    padding:10px;
    color:#232323;
    cursor:pointer;
}

.btnDisable {
    background-color:#ababab; 
    border:1px solid #ababab;
    padding:10px;
    color:#232323;
    cursor:wait; 
}

JavaScript

var sec = 15;
var myTimer = document.getElementById('myTimer');
var myBtn = document.getElementById('myBtn');
window.onload = countDown;

function countDown() {
    if (sec<10) {
    myTimer.innerHTML = "0" + sec;
    } else {
        myTimer.innerHTML = sec;}
    if (sec <= 0) {
        $("#myBtn").removeAttr("disabled")
        $("#myBtn").removeClass().addClass("btnEnable");
        return;
    }
    sec -= 1;
    window.setTimeout("countDown()", 1000);
}