JSFiddle - React, Tailwind, and code Playground

HTML

<div id="preload">
    <div class="infoboard">
         <h1>Select the team you'd most like to bash:</h1>

    </div>
    <div class="configuration">
        <input id="miss" type="checkbox" checked="checked">miss remove 5 point</input>
        <input type="checkbox" id="timeAttack">time attack!</input>
    </div>
    <ul id="choice">
        <li data-rel="{slug:'developers',owner_screen_name:'mootools'}">MooTools</li>
        <li data-rel="{slug:'board',owner_screen_name:'jquery'}">JQuery</li>
        <li data-rel="{slug:'committers',owner_screen_name:'dojo'}">Dojo</li>
        <li data-rel="{slug:'javascript-developers',owner_screen_name:'BeansAndCurry'}">Javascript developers</li>
    </ul>
</div>
<div id="game" style="display:none">
    <audio id="no3" src="http://www.pacdv.com/sounds/people_sound_effects/burp-1.wav"></audio>
    <audio id="app1" src="http://www.pacdv.com/sounds/people_sound_effects/applause-1.wav"></audio>
    <audio id="app2" src="http://www.pacdv.com/sounds/people_sound_effects/applause-2.wav"></audio>
    <audio id="app3" src="http://www.pacdv.com/sounds/people_sound_effects/applause-3.wav"></audio>
    <audio id="app4" src="http://www.pacdv.com/sounds/people_sound_effects/applause-4.mp3"></audio>
    <audio id="bang" src="http://www.pacdv.com/sounds/mechanical_sound_effects/bang_1.wav"></audio>
    <audio id="gotit" src="http://www.pacdv.com/sounds/mechanical_sound_effects/glass_breaking_1.wav"></audio>
    <div style="position:absolute;top:-1000px;left:-1000px;">
        <iframe src="" width="640" height="385" id="music" type="text/html"></iframe>
    </div>
</div>
<div id="canvas"></div>

CSS

@import url(http://fonts.googleapis.com/css?family=Codystar);
 @import url(http://fonts.googleapis.com/css?family=Advent+Pro);
 .configuration {
    background: rgba(3, 3, 3, 0.45);
    color:white;
}
.timer {
    position:absolute;
    bottom:0;
    right:0;
    font-family:'Advent Pro';
    font-varian:small-caps;
    font-weight:bold;
}
.loser {
    width:100%;
    height:100%;
    background: rgba(0, 0, 0, 0.45);
    z-index:1000;
    display:block;
    position:absolute;
    top:0;
    left:0;
}
.loser span {
    width:100%;
    position:absolute;
    top:48%;
    left:30%;
    color:white;
}
h1, div.score {
    font-family: Codystar;
    font-size: 25px;
    background: transparent;
}
div.score, #choice li {
    font-family:'Advent Pro';
    font-size:20px;
}
h1 {
    margin-top: -30px;
}
div.infoboard {
    overflow-x: auto;
    overflow-y: none;
    height: 30px;
    background: rgba(3, 3, 3, 0.45);
    color: orange;
    text-indent:0.3em;
}
#choice li {
    cursor: pointer;
    line-height:1.3;
    padding-left:0.3em;
    margin-bottom: 10px;
    clear: both;
    cursor: pointer;
    color: #555;
}
#choice li:hover {
    color: #000;
}
#canvas, #choice {
    width: 340px;
}
body {
    font-family: Verdana, sans-serif;
    -webkit-user-select: none;
    cursor: none;
    background: url(http://todomvc.com/assets/bg.png);
}
.block {
    float: left;
    width: 30px;
    height: 30px;
    margin: 2px;
    overflow: hidden;
    border-radius: 50%;
    -webkit-background-clip: border-box;
    -webkit-mask-image: -webkit-radial-gradient(circle, white, black);
    box-shadow: inset 0px 2px 5px rgba(0, 0, 0, 0.3);
    background: #ccc;
}
.block div {
    border-radius: 50%;
    width: 30px;
    height: 30px;
    background-size: 30px;
    -webkit-transition-duration: 300ms;
    -webkit-transition-timing-function: ease-in-out;
    -webkit-transform: translate3d(0, 100%, 0);
}
.block.highlight div {
    -webkit-transform: translate3d(0, 0, 0);
}
.hammer {
   ...

JavaScript

(function () {
    'use strict';

    var startGame = function (developers) {
        var running = true;
        $('music').set('src', 'https://www.youtube.com/embed/yO7MWuJ7zLA?autoplay=1');
        var miss = $('miss').get('checked');
        var timeAttack = $('timeAttack').get('checked');
        //alert( miss + ' '+timeAttack);
        $('preload').destroy();
        $('game').setStyle('display', 'block');
        var body = document.body;
        var blocks = new Elements;
        (40).times(function () {
            blocks.push(new Element('div.block'));
        });

        var canvas = document.id('canvas').empty()
        canvas.adopt(blocks);
        var hammer = new Element('div.hammer').inject(canvas);
        var score = new Element('div.score').inject(canvas);
        var text = 'YOU WIN! It took you {seconds} seconds. You clicked {times} times ({percentage} % hit the targets). Now go and collect your prize: {prize}';
        var points = 0;
        var time = 0;
        var clicks = 0;
        var timer;
        //var developers = 16;
        var timer = new Element('div', {
            class: 'timer'
        });
        var timerstop = +new Date() + 180000;

        if (timeAttack) {
            timer.inject(body);
        }
        var loop = function () {
            (function () {
                if (!running) return;
                if (timeAttack) {
                    var now = +new Date();
                    var diff = Math.floor((timerstop - now) / 1000);
                    if (diff > 0) {
                        var minutes = Math.floor(diff / 60);
                        var seconds = diff - minutes * 60;
                        timer.set('text', minutes + ':' + seconds < 10 ? '0' + seconds : seconds);
                    } else {
                        running = false;

                        $('no3').play();
                        var loser = new Element('div', {
                            'class': 'loser',
                    ...