JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <div id="l_box" class="box">
        <div id="l_hero" class="hero"></div>
        <div class="item" id="l_1">
            <img src="http://snhth.lima-city.de/acagamejam/items/aca.png" />
        </div>
        <div class="item" id="l_2">
            <img src="http://snhth.lima-city.de/acagamejam/items/mineturtle.png" />
        </div>
        <div class="item" id="l_3">
            <img src="http://snhth.lima-city.de/acagamejam/items/iron.png" />
        </div>
        <div class="item" id="l_4">
            <img src="http://snhth.lima-city.de/acagamejam/items/cloud.png" />
        </div>
        <div class="item" id="l_5">
            <img src="http://snhth.lima-city.de/acagamejam/items/maske.png" />
        </div>
        <div class="item" id="l_6">
            <img src="http://snhth.lima-city.de/acagamejam/items/anhalter.png" />
        </div>
        <div class="item" id="l_7">
            <img src="http://snhth.lima-city.de/acagamejam/items/bat.png" />
        </div>
        <div class="item" id="l_8">
            <img src="http://snhth.lima-city.de/acagamejam/items/latern.png" />
        </div>
        <div class="item" id="l_9">
            <img src="http://snhth.lima-city.de/acagamejam/items/trex.png" />
        </div>
        <div class="item" id="l_10">
            <img src="http://snhth.lima-city.de/acagamejam/items/spider.png" />
        </div>
        <div class="item" id="l_11">
            <img src="http://snhth.lima-city.de/acagamejam/items/super.png" />
        </div>
        <div class="item" id="l_12">
            <img src="http://snhth.lima-city.de/acagamejam/items/tod.png" />
        </div>
        <div class="item" id="l_13">
            <img src="http://snhth.lima-city.de/acagamejam/items/donut.png" />
        </div>
        <div class="item" id="l_14">
            <img src="http://snhth.lima-city.de/acagamejam/items/harry.png" />
        </div>
        <div class="item" id="l_15">
            <img...

CSS

/*test*/
 body {
    background-color: #ddddff;
    text-align:center;
}
div {
    display:block;
}
#wrapper {
    border: thin solid red;
    position: relative;
    /*width:99%;/*sorgt für starke unterschiede in der balance*/
    min-width:320px;
    max-width:960px;
    left:0px;
    height:640px;
    /*Spielfeldhöhe, zb 960 px*/
}
.box {
    top:0px;
    height:100%;
    position:absolute;
    border-bottom: 10px solid black;
}
#l_box {
    border-right: 5px solid black;
    width: 70%;
    left: 0px;
    float:left;
}
#r_box {
    border-left: 5px solid black;
    width: 30%;
    right: 0px;
    float:right;
}
.hero {
    position:absolute;
    border: thin solid #fff;
    height:80px;
    width:80px;
    bottom:0px;
}
#l_hero {
    background-color:black;
}
#r_hero {
    background-color:orange;
}
.item {
    visibility:hidden;
    display:hidden;
    position:absolute;
    width: 40px;
}
img {
    width: 40px;
}
}

JavaScript

alert('Hello, welcome to this game!');
alert('It was developed during the Acagamejam November 2013\nhttp://gamejam.de/\n\nWe tried to get a special achievement and create a game running in IE8 without using special frameworks and librarys.\nSadly, we failed.');
alert('The following game is made for two players.\nPlayer one (black square) uses SPACE-key to move.\nPlayer two uses NUMPAD-0-Key to move.\nWhile key is pressed, the square moves to centre. Otherwise it moves to the windows border.\nThe game lasts 30 seconds. Get the falling items will increase a players score, size and the next items speed.\nPress OK to start the game. Have Fun.');
var Start = Date.now();
var EndTime = Start + 30000;

var S1 = document.getElementById('l_hero');
var S2 = document.getElementById('r_hero');
var B1 = document.getElementById('l_box');
var B2 = document.getElementById('r_box');

var leftKey = 0;
var rightKey = 0;
var step = 5;
//var Timer=2999;//3000*10ms=30000ms=30s
var Ende = false;
//var LIC=1; var RIC=1; //left/right itemcounter
var ScoreL = 0;
var ScoreR = 0;
var speedL = 0.5;
var speedR = 0.5;

var links = 'offsetLeft';
var breite = 'offsetWidth';
var oben = 'offsetTop';
var hoehe = 'offsetHeight';

function initialise() {
    S1.style.backgroundColor = 'black';
    S1.style.left = 50 + '%';
    S2.style.backgroundColor = 'orange';
    S2.style.right = 50 + '%';
    newItem('l', '1');
    newItem('r', '1');
}



function getKeyCode(event) {
    event = event || window.event;
    return event.keyCode;
}

function setNewKey(e) {
    if (getKeyCode(e) == '32') {
        leftKey = 1;
    }
    if (getKeyCode(e) == '96') {
        rightKey = 1;
    }
    //
    //  moveByKey();
}

function releaseKey(e) {
    if (getKeyCode(e) == '32') {
        leftKey = 0;
    }
    if (getKeyCode(e) == '96') {
        rightKey = 0;
    }
    //
    //  moveByKey();
}

initialise();

function preventEscape() {
    if (S2.offsetLeft <= -00) { //Glitch weg. (gibt andere)
       ...