JSFiddle - React, Tailwind, and code Playground

HTML

Type here. Try some alpha letters as well as special keys like <code>`</code>
<code>-</code>
<code>=</code>
<code>[</code>
<code>]</code>
<code>[ENTER]</code>
<code>;</code>
<code>'</code>


<div class="output">
You typed <code class="key"></code> which is Javascript <b></b>keyCode</b> <code class="keyCode"></code>, in UTF that would be <code class="UTF"></code>
</div>

CSS

code {  background-color: #e2aec8ab;
; border: solid 1px gray; border-radius: 3px; padding: 0 .5em; min-height: 1em; min-width: .2em;margin: 0 .1em;}

.output {
  margin: 2em;
  border: solid 1px lightgray;
  border-radius: 3px;
  background-color: rgba(200,250,230,.3);
  padding: 1em;
}

JavaScript

document.addEventListener("keyup", function(e){

document.querySelector(".key").innerHTML = e.key;
document.querySelector(".keyCode").innerHTML = e.keyCode;
document.querySelector(".UTF").innerHTML = String.fromCharCode(event.keyCode);

});