JSFiddle - React, Tailwind, and code Playground

HTML

<div id="ua"></div>

<input id="input" type="text" value="The quick brown ">

<table>
  <thead>
    <tr>
      <th>Event</th>
      <th>Data</th>
      <th>Selection</th>
    </tr>
  </thead>
  <tbody id="log"></tbody>
</table>

CSS

* {
  box-sizing: border-box; 
} 

body {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

#ua {
  background-color: black;
  color: white;
  padding: 0.3rem;
  font-size: 0.6rem;
  margin-bottom: 1rem;
}

input[type=text] {
  padding: 0.5rem;
  font-size: 1.5rem;
  width: 100%;
}

table {
  border-collapse: collapse;
  margin-top: 1rem;
}

th, td {
  padding: 0.3rem 0.6rem;
  text-align: left;
}

th {
  font-weight: bold;
}

tbody tr:nth-child(odd) {
  background-color: #f2f2f2;
}

JavaScript

(() => {
	const inputElement = document.getElementById("input")
  const logElement = document.getElementById("log")
  
  const eventNames = "keydown beforeinput compositionstart compositionupdate compositionend input".split(" ")
  
  eventNames.forEach(eventName => {
  	inputElement.addEventListener(eventName, logEvent)
  })
  
  function logEvent(event) {
  	console.log(event)
    const { type, data } = event
  	const { selectionStart, selectionEnd } = inputElement
    
  	logElement.insertAdjacentHTML("beforeend", `
    	<tr>
      	<td>${type}</td>
        <td>${data ? JSON.stringify(data) : ""}</td>
        <td>[ ${selectionStart}, ${selectionEnd} ]</td>
      </tr>
    `)
  }
  
  document.getElementById("ua").textContent = navigator.userAgent
})()