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

function intervalFunc(thinkingTime, answerTime)
	{
		jQuery('#qanda-time-remaining').text(''+(thinkingTime - 1));
	}

	function enableTimer(time)
	{
		var intervalID;
		var hasThinkingTime = true;
		var thinkingTime = time;

		var hasAnswerTime = true;
		var answerTime = 10;

		if(hasThinkingTime && hasAnswerTime)
		{
			setInterval( intervalFunc(thinkingTime, answerTime), 1000);
		}
		
		setTimeout(function(){ 
			
			clearInterval(intervalID);

		}, time * 1000);
	}

enableTimer(30);