JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<div id="qanda-timer-container">
    <div class="qanda-timer"> <span id="qanda-time-remaining"></span>

    </div>
</div>

CSS

#qanda-timer-container {
    width: 10em;
    height: 10em;
    position: absolute;
    right: 2em;
    bottom: 2em;
}
.qanda-timer {
    width:100%;
    height:100%;
    border-radius: 5em;
    border:5px solid #3f51b5;
}
#qanda-time-remaining {
    display: block;
    font-size: 2em;
    color:#555;
    text-align: center;
    margin-top:2em
}

JavaScript

var thinkingTime = undefined;
var answerTime = undefined;
var intervalID = undefined;

function enableTimer(time) {

    var hasThinkingTime = true;
    thinkingTime = time;

    var hasAnswerTime = true;
    answerTime = 10;

    if (hasThinkingTime && hasAnswerTime) {
        intervalID = setInterval(function () {
            thinkingTime -= 1;
            jQuery('#qanda-time-remaining').text('' + (thinkingTime));
        }, 1000);
    }

    setTimeout(function () {

        clearInterval(intervalID);

    }, time * 1000);
}

enableTimer(30);