JSFiddle - React, Tailwind, and code Playground

HTML

<p contenteditable>edit here</p>
<ul></ul>

CSS

.olderTimeStamp {
  color: red;
}

JavaScript

var latestTimeStamp = 0;
function handler(event) {
  var li = document.createElement("li");
  li.textContent = event.type + ":{ timeStamp: " + event.timeStamp + " }";
  if (latestTimeStamp <= event.timeStamp) {
    latestTimeStamp = event.timeStamp;
  } else {
    li.className = "olderTimeStamp";
  }
  var ul = document.getElementsByTagName("ul")[0];
  ul.insertBefore(li, ul.firstChild);
  setTimeout(()=>{ ul.removeChild(li); }, 10 * 1000);
}

var events = [ "keydown", "keypress", "keyup", "compositionstart", "compositionupdate", "compositionend", "beforeinput", "input" ];
for (var i = 0; i < events.length; i++) {
	window.addEventListener(events[i], handler);
}