JSFiddle - React, Tailwind, and code Playground

by jfriend00

HTML

<div>Click Here, then use Arrows to Navigate.</div>
<div id="spelplan">
		<div id="game-board">
			
		<div class="card active" id="0"></div><div class="card" id="1"></div><div class="card" id="2"></div><div class="card" id="3"></div><div class="card" id="4"></div><div class="card" id="5"></div><div class="card" id="6"></div><div class="card" id="7"></div><div class="card" id="8"></div><div class="card" id="9"></div><div class="card" id="10"></div><div class="card" id="11"></div><div class="card" id="12"></div><div class="card" id="13"></div><div class="card" id="14"></div><div class="card" id="15"></div></div>
		<div id="right-section">
			<div id="logo"></div>
			<div id="game-info">
				Top score: <p id="top-score">0</p><br>
				Current score: <p id="current">0</p><br>
				Games played: <p id="played-games">0</p>
			</div>
			<div id="restart"><button id="reset-button">Reset game</button></div>
		</div>
	</div>

CSS

.active {border:2px solid red;}

*{margin: 0; padding:0;}
body{
	font-family:arial;
	background:#888888;
}
#spelplan{
	margin:90px auto;
	width:600px;
	height:390px;
	background:#282828;
	border-radius: 10px;
}
#game-board{
	width:380px;
	height:380px;
}
#logo, #game-info{
	display:block;
}
#restart{
	margin-top: 120px;
}
#game-board, #right-section{
	float:left;
}
#right-section{
	margin-top:20px;
	border-left:1px solid #fff;
	padding-left:20px;
	width:179px;
	height:350px;
	color:#fff;
}
#logo{
	border-radius: 10px;
	height:70px;
	width:180px;
	background: #fff url(http://www.piab.com/assets/images/PIAB-logotype.gif) 15px 10px no-repeat;
}
#game-info{
	margin: 20px 0;
	margin-top:55px;
}
.card{
	box-shadow: 0 2px 2px 1px #000;
	border-radius: 5px; 
	height:70px;
	width:70px;
	display:inline-block;
	margin-left:20px;
	margin-top:20px;
	background: #fff url(http://img201.imageshack.us/img201/7391/piablogo.png) 14px 7px no-repeat;
}
#start{
	height:30px; 
    width:100px; 
    margin: -30px -50px; 
    position:relative;
    top:50%; 
    left:50%;
}
#reset-button{
	padding: 3px;
}
#restart,#top-score,#current,#played-games{
	display:inline-block;
}

JavaScript

(function() {
	// refined add event cross browser
	function addEvent(elem, event, fn) {
		if (typeof elem === "string") {
			elem = document.getElementById(elem);
		}

		// avoid memory overhead of new anonymous functions for every event handler that's installed
		// by using local functions
		function listenHandler(e) {
			var ret = fn.apply(this, arguments);
			if (ret === false) {
				e.stopPropagation();
				e.preventDefault();
			}
			return(ret);
		}
		
		function attachHandler() {
			// set the this pointer same as addEventListener when fn is called
			// and make sure the event is passed to the fn also so that works the same too
			var ret = fn.call(elem, window.event);   
			if (ret === false) {
				window.event.returnValue = false;
				window.event.cancelBubble = true;
			}
			return(ret);
		}

		if (elem.addEventListener) {
			elem.addEventListener(event, listenHandler, false);
		} else {
			elem.attachEvent("on" + event, attachHandler);
		}
	}



    function addClass(elem, cls) {
        var oldCls = elem.className;
        if (oldCls) {
            oldCls += " ";
        }
        elem.className = oldCls + cls;
    }
    
    function removeClass(elem, cls) {
        var str = " " + elem.className + " ";
        elem.className = str.replace(" " + cls + " ", " ").replace(/^\s+|\s+$/g, "");
    }
    
    
    function findItem(items, target) {
        for (var i = 0; i < items.length; i++) {
            if (items[i] === target) {
                return(i);
            }
        }
        return(-1);
    }
    
    var keys = {up: 38, down: 40, left: 37, right: 39};
    var cards = document.getElementById("game-board").getElementsByClassName("card");
    addEvent(document, "keydown", function(e) { 
		// get key press in cross browser way
		var code = e.which || e.keyCode;
		// number of items across
		var width = 4;
		var increment, index, newIndex, active;
		
		switch(code) {
			case keys.up:
				increment = -width;
				break;
			case...