JSFiddle - React, Tailwind, and code Playground

HTML

<div class='container'>
    <div class='target' id='box1'>Box 1: hover here and type
        <span></span>
    </div>
    <div class='target' id='box2'>Box 2: hover here and type
        <span></span>
    </div>
    <div class='target' id='box3'>Box 3: hover here and type
        <span></span>    
    </div>
    <div class='display'></div>
</div>

CSS

.container{
    height: 400px;
    width: 400px;
    background-color: grey;
    position: relative;
}
.target{
    position: absolute;
    border: 1px solid black;
    background-color: red;
    width: 100px;
    height: 100px;
}
#box1{
    top: 100px;
    left: 10px;
}
#box2{
    top: 100px;
    left: 150px;
}
#box3{
    top: 100px;
    right: 10px;
}
.display{
    width: 100px;
    height: 100px;
    position: absolute;
    left: 10px;
    bottom: 10px;
    border: 1px solid black;
    background-color: green;
    text-align: center;
    line-height: 100px;
    font-size: 20px;
}
.hover{
    background-color: pink;
}
}

JavaScript

console.log('where?');
$('.target').on('mouseenter', function(event){
    $(event.target).addClass('hover');
    var span = $(event.target).find('span');
    span.on('keydown', recordKeydown);
    span.attr('tabindex', '1').attr('contenteditable', 'true');
    span.focus();
});

$('.target').on('mouseleave', function(event){
    $(event.target).removeClass('hover');
    $(event.target).find('span').off().removeAttr('contenteditable').removeAttr('tabindex').blur();
    $('.display').empty();
});

var recordKeydown = function(event){
    event.preventDefault();
    event.stopPropagation();
    console.log('keydown detected');
   $('.display').html($(event.target).parent().attr('id') + ": " + event.which);
};