JSFiddle - React, Tailwind, and code Playground

HTML

<head>
	<title>Hungry Kittens — Shiny Demos</title>
	<meta charset='utf8'>
	<meta name="viewport" id="viewport" content="width=500">
	<link rel="stylesheet" href="styles/style.css">
	<link rel="stylesheet" href="/styles/panel.css">
	<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Special+Elite'>
</head>
<body>
	<div id="demo">
		<h1>Hungry Kittens (Room #<span id="room"></span>)</h1>
		<div id="info">
			<p id="fps"></p>
		</div>
		<div id="container"></div>
		<div id="toolbar">
			<span class="leftside">
				<span class="button meow" id="button-meow"></span>
				<span class="button jump"id="button-up"></span>	
			</span>
			<span class="rightside">
				<span class="button left" id="button-left"></span>
				<span class="button right" id="button-right"></span>	
			</span>
		</div>
		<script src="/scripts/modernizr.js"></script>
		<script src="/scripts/panel.js"></script>
		<script src="scripts/options.js"></script>
		<script src="scripts/sprite.js"></script>
		<script src="scripts/game.js"></script>
	</div>
<script>
var Game = function() {
	var messageBox = document.getElementById("messages");

	var LEFT = 0, JUMP = 1, RIGHT = 2, MEOW = 3;
	
	//buttons = [left, right, jump, meow]
	var buttons = [false, false, false, false];
	
	var cats = {};
	var me, socket;

  // creates a scene using sprite.js
	var SCENE_WIDTH = 500;
	var SCENE_HEIGHT = 490;
	var container = document.getElementById('container');
	var scene = sjs.Scene({ parent:container, w: SCENE_WIDTH, h: SCENE_HEIGHT, autoPause: false });
	var ticker;

  // plays meow sound, if this cat meows also broadcasts to server
	var meow = function (broadcast) {
		var a = document.createElement("audio");
		a.src = "http://media.shinydemos.com/hungry-kittens/meow" + (Math.round(Math.random()*10) % 5) + ".wav";
		a.addEventListener("ended", function () { a.parentNode.removeChild(a); }, false);
		document.body.appendChild(a);
		a.play();
		if (broadcast){
			socket.send(JSON.stringify({ type: "meow",...

CSS

html, body {
  margin: 0;
  padding: 0;
	color: #eee;
  overflow: hidden;
  background: black;
}

#demo {
	margin:none;
	padding:none;
}

#fps {
	color: #F00;
	display: none;
}
.sjs {
	margin: auto;
	border: 0px solid #000;
}

h1 {
	margin: auto;
	padding: 10px;
	text-align: center;
	font-family: 'Special Elite', Courier;
}
#container{
  clear: both;
  width: 500px;
  height:500px;
  margin: auto;
  background-image: url(../images/backgnd.jpg);
  /* Background image  Ⓒ A is for Angie http://www.flickr.com/photos/aisforangie/9526485/in/photostream */
  background-repeat: no-repeat;
	background-position: 0 0;
}

span.nametag {
    color: #00F;
    font-family: sans-serif;
    font-size: 10px;
    font-weight: bold;
    text-shadow: 0 0 1px #FFF;
    display: block;

    user-select: none;
    -o-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}

/*BUTTONS START*/

#toolbar {
  font-size: 0; /* AVOIDING SPACING CONFLICTS */
	width: 500px;
	margin: auto;
	text-align: center;
	margin-top: 10px;
}

/* NEED CLEAR IN ORDER TO FLOAT THE CONTROLS */
#toolbar:after {
  content: "";
  display: block;
  clear: both;
}

.button {
  padding: 50px; 
  background-size: 60% 60%;
  border-radius: 100px;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  display: inline-block;
}
.button:active {
  -webkit-transform: translateY(2px);
  -o-transform: translateY(2px);
  transform: translateY(2px);
}

.button.left   {background-image: url('../images/left.png')}
.button.right  {background-image: url('../images/right.png')}
.button.jump   {background-image: url('../images/jump.png')}
.button.meow   {background-image: url('../images/meow.png')}

.leftside, .rightside {
  background-color: rgba(128,128,128,0.4);
  box-shadow: inset 0 0 0 1px rgba(128,128,128,0.1);
  border-radius: 100px;
  padding: 8px 12px 12px 12px;
}

.leftside {
  float: left;
  padding-left: 0px;
  margin-left: 5px;
}

.rightside {
  float: right;
  padding-right: 0px;
 ...