JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="output"></ul>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

CSS

.left {
    color       : blue;
    text-shadow : 10px 0px 10px #000;
}
.right {
    color       : red;
    text-shadow : -10px 0px 10px #000;
}
.up {
    color       : green;
    text-shadow : 0px 10px 10px #000;
}
.down {
    color       : purple;
    text-shadow : 0px -10px 10px #000;
}
li {
    border-bottom : 1px solid #ccc;
    width         : 75px;
    text-align    : center;
    padding       : 5px;
}

JavaScript

var last_position = {},
    $output       = $('#output'),
    mousemove_ok  = true,
    mouse_timer   = setInterval(function () {
        mousemove_ok = true;
    }, 500),
    count         = 1;
$(document).on('mousemove', function (event) {
    if (mousemove_ok) {
        mousemove_ok = false;
        if (typeof(last_position.x) != 'undefined') {
            var deltaX = last_position.x - event.clientX,
                deltaY = last_position.y - event.clientY;
            if (Math.abs(deltaX) > Math.abs(deltaY) && deltaX > 0) {
                //left
                $output.append('<li class="left">Left (' + (count++) + ')</li>');
            } else if (Math.abs(deltaX) > Math.abs(deltaY) && deltaX < 0) {
                //right
                $output.append('<li class="right">Right (' + (count++) + ')</li>');
            } else if (Math.abs(deltaY) > Math.abs(deltaX) && deltaY > 0) {
                //up
                $output.append('<li class="up">Up (' + (count++) + ')</li>');
            } else if (Math.abs(deltaY) > Math.abs(deltaX) && deltaY < 0) {
                //down
                $output.append('<li class="down">Down (' + (count++) + ')</li>');
            }
            if ($output.children().length> 10) {
                $output.children().eq(0).remove();
            }
        }
        last_position = {
            x : event.clientX,
            y : event.clientY
        };
    }
});