JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://pozadi.github.io/kefir/dist/kefir.js"></script>
<script src="https://craig.is/assets/js/mousetrap/mousetrap.js"></script>
<div class="container">
    <div id="player"></div>
</div>

<button class="btn" id="btn-left"> ← </button>
<button class="btn" id="btn-right"> → </button>

CSS

.container {
    background-color: #fbfbfb;
    height: 200px;
    width: 200px;
}

#player {
    position: relative;
    background-color: #00ff00;
    height: 10px;
    width: 10px;
    top: 20px;
}

.btn {
    font-size: 16px;
    position: relative;
    left: 70px;
}

JavaScript

var player = document.querySelector("#player");

var drawSnake = function(x) {
    player.style.left = x + "px";
};

var lefts = Kefir.fromEvents(document.querySelector('#btn-left'), 'click');
var rights = Kefir.fromEvents(document.querySelector('#btn-right'), 'click');

var leftKeys = Kefir.stream(function(emitter){
    Mousetrap.bind('left', function(e) {
        emitter.emit(e);
        console.log(e);
    });
    return function(){
        // unbind
    };
});
var rightKeys = Kefir.stream(function(emitter){
    Mousetrap.bind('right', function(e) {
        emitter.emit(e);
        console.log(e);
    });
    return function(){
        // unbind
    };
});

var mappedClicks = 
    lefts.map(function(x) {
        return -10;
    }).merge(
        rights.map(function(x) {
        return 10;
    })).merge(
        leftKeys.map(function(x) {
        return -5;
    })).merge(
        rightKeys.map(function(x) {
        return 5;
    }));


var scanClicks = mappedClicks.scan(function(prev, next) {
    return next + prev;
}, 10);


scanClicks.onValue(function(x) {
    drawSnake(x);
});