JSFiddle - React, Tailwind, and code Playground
HTML
<div id="backer">
<p>BEER<span id="fade">:</span>30</p>
</div>
CSS
@font-face {
font-family:"DSDIGI";
src:url("http://fontsforweb.com/public/fonts/1091/DSDIGI.eot") format("eot"), url("http://fontsforweb.com/public/fonts/1091/DSDIGI.ttf") format("truetype");
font-weight:normal;
font-style:normal;
}
#backer {
background-image: url('http://i.imgur.com/w3W5TPd.jpg');
width: 450px;
height: 354px;
color: red;
font-family:'DSDIGI';
}
#backer p {
width: 100%;
text-align: center;
display: block;
line-height: 325px;
font-size: 60px;
}
JavaScript
function start() {
$('#fade').fadeOut(function () {
$('#fade').fadeIn();
});
setTimeout(start, 1000);
}
start();