JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<div id="canvas">
	<div id="grass"></div>
	<div id="box"></div>
	<div id="man"></div>
	</div>
</body>

CSS

html, body {
	height: 100%;
}

body {
	margin: 0;
	padding: 0;
	overflow: hidden;
}

#canvas {
	position: relative;
	min-width: 2500px;
	height: 100%;
}

#grass {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100px;
	background: green;
}

#box {
	position: absolute;
	bottom: 100px;
	left: 2000px;
	width: 100px;
	height: 100px;
	background: brown;
}

#man {
	position: fixed;
	bottom: 100px;
	left: 200px;
	width: 73px;
	height: 161px;
	background-image: url(http://i58.tinypic.com/dz9g9h.png);
	background-repeat: no-repeat;
	background-position: 0 0;
		-webkit-transition: bottom 0.5s ease-in-out;
		-moz-transition: bottom 0.5s ease-in-out;
		-ms-transition: bottom 0.5s ease-in-out;
		-o-transition: bottom 0.5s ease-in-out;
		transition: bottom 0.5s ease-in-out;
}

JavaScript

$( document ).ready(function() {


});

$(document).keydown(function(event) {
    console.log("Key pressed: " + event.keyCode);

    if(event.keyCode == 39) {
        event.preventDefault();
        $("#canvas").animate({
        marginLeft: "-=10px"
      }, 1)
    }

    if(event.keyCode == 37) {
        event.preventDefault();
        if($("#canvas").css('margin-left') < '0px') {
            $("#canvas").animate({
            marginLeft: "+=10px"
            }, 1)
        }
    }

    if(event.keyCode == 32 || event.keyCode == 38) {
        event.preventDefault();
        $("#man").animate({
            bottom: 300
        }, 1000, "linear", function () {
            setTimeout(function () {
                $("#man").animate({
                    bottom: 100
                }, 1000);
            }, 500);
        });
    }
});