JSFiddle - React, Tailwind, and code Playground

HTML

<div tabindex="0"></div>

CSS

div {
    border: 1px solid red;
    width: 100px;
    height: 100px;
}

JavaScript

$('div').on('keydown', function(e) {
    switch (e.keyCode) {

    case 38:
        // on up arrow code
        console.log('up arrow');
        e.stopPropagation();
        break;

    case 40:
        // on down arrow code
        console.log('down arrow');
        e.stopPropagation();
        break;

    case 33:
        // on page up code
        console.log('page up');
        e.stopPropagation();
        e.preventDefault();
        break;

    case 34:
        // on page down code
        console.log('page down');
        e.stopPropagation();
        e.preventDefault();
        break;
            
    case 35:
        // on home code
        console.log('home');
        e.stopPropagation();
        e.preventDefault();
        break;
            
    case 36:
        // on end code
        console.log('end');
        e.stopPropagation();
        e.preventDefault();
        break;
            
    default:
        break;
    };
});