JSFiddle - React, Tailwind, and code Playground

HTML

<div id="boat">
    <a href="javascript:void(0);" id="up">&uarr;</a>
    <a href="javascript:void(0);" id="left">&larr;</a>
    <a href="javascript:void(0);" id="right">&rarr;</a>
    <a href="javascript:void(0);" id="down">&darr;</a>
</div>

CSS

#boat {
    background-color: #ccf;            
    position: absolute;
    height: 70px;        
    width: 70px;        
}

#boat a {
    position: absolute;
    display: block;            
    text-decoration: none;
    color: #000;            
}

a#up {
    top: 0px;
    left: 25px;
}

a#down {
    top: 45px;
    left: 25px;
}

a#left {
    top: 25px;
    left: 0px;
}

a#right {
    top: 25px;
    left: 45px;
}

JavaScript

$('#boat a').click(function() {
    var vector = {
        up : [0, -30],
        down : [0, 30],
        left : [-30, 0],
        right : [30, 0]        
    }[$(this).attr('id')];
    var left = parseInt($('#boat').css('left')) + vector[0];
    var top = parseInt($('#boat').css('top')) + vector[1];
    $('#boat').css('left', left);
    $('#boat').css('top', top);
});