JSFiddle - React, Tailwind, and code Playground

HTML

<div id="sandbox"></div>

JavaScript

const handleInputInput = (evt) => {
	const $lis = document.querySelectorAll('.keys_pressed li');
  if ($lis && $lis.length > 2){
  	return;
  }
  const $ul = document.querySelector('.keys_pressed');
  const $li = document.createElement('li');
  $li.innerText = evt.target.value;
  $ul.append($li);
};

const startSandbox = () => {
  const $input = document.createElement('input');
  $input.setAttribute('type', 'text');
  $input.addEventListener('input', handleInputInput);
  
  const $ul = document.createElement('ul');
  $ul.classList.add('keys_pressed');

  const $sandbox = document.getElementById('sandbox');
  $sandbox.append($input);
  $sandbox.append($ul);
};

const initApp = () => {
  startSandbox();
};

initApp();