JSFiddle - React, Tailwind, and code Playground

by LyndseyB

HTML

<script src="&lt;link href=&#39;http://fonts.googleapis.com/css?family=Varela+Round&#39; rel=&#39;stylesheet&#39; type=&#39;text/css&#39;&gt;"></script>
<div id="game-timer"></div>
<div id="letter-container" class="container">
    <ul id="game-letters" class="rounded-border">
        <li> A <span>1</span> </li>
        <li> E <span>1</span> </li>
        <li> D <span>1</span> </li>
        <li> S <span>1</span> </li>
        <li> R <span>1</span> </li>
        <li> A <span>1</span> </li>
        <li> L <span>1</span> </li>
    </ul>
</div>

CSS

@import url('http://fonts.googleapis.com/css?family=Varela+Round');

/* General Styles & Common Classes */
html, body, h1, h2, input, header, footer {
	font-family: 'Varela Round';
	padding:0;
	margin:0;	
	border:none;
}	

*, *:before, *:after {
	-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}

ul, ol { list-style:none; }

.container {
	width:90%;
	max-width:900px;
	margin:0 auto;		
	position:relative;
}

.rounded-border li, .rounded-border { 
    -webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

#letter-container { display:table; table-layout:fixed; border-spacing:0.9em; } 
#game-letters { display:table-row; }
#game-letters li { display:table-cell; text-align:center; position:relative; padding:1em 0; background:#2E9AFE; color:white; font-weight:bold; }
#game-letters li > span { position:absolute; right:0; bottom:0; font-size:xx-small; padding:1em; }

JavaScript

var tCounter = 10;
var tEnd = 0;
var timer = $('#game-timer');
var intervalID = window.setInterval(countdown, 1000);


function countdown() {
    tCounter-=1;
    if(tCounter === (tEnd-1)) {
        //clearInterval(intervalID);
        tCounter = 10;
    } else {
        timer.html(tCounter);
    }
    
}