JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<style>
     label {width: 120px; display:inline-block}
     div {background-color: #dfd}
     span > span {background-color: #ccf}
</style>

<body>
<br>
<div onkeydown='doit(_keydown)'
     onkeyup='doit(_keyup)'
     oninput='doit(_input)'
     onbeforeinput='doit(_beforeinput)'
     id="editable" contenteditable >contenteditable
</div>
<br>
<br>
<input onkeydown='doit(_keydown)'
       onkeyup='doit(_keyup)'
       oninput='doit(_input)'
       onbeforeinput='doit(_beforeinput)'/><br>

<label>onkeydown:</label><span id="_keydown"></span><br>
<label>onkeyup:</label><span id="_keyup"></span><br>
<label>oninput:</label><span id="_input"></span><br>
<label>onbeforeinput:</label><span id="_beforeinput"></span><br>

<script>
function doit(elem) {
    elem.innerHTML = "data |<span>"+event.data+"</span>|    key |<span>"+event.key+"</span>|   keyCode |<span>"+event.keyCode+"</span>|"
}
</script>

</body>
</html>