JSFiddle - React, Tailwind, and code Playground

by ScottRippey

HTML

<pre id="output">
  Output
</pre>

<pre contenteditable=true id="input">
Hello World!
</pre>

CSS

body, pre {
  font: 20px Arial;
  margin: 0; padding: 0;
}

#input {
  #position: absolute;
  #top: 0;
  color: transparent;
  #visibility: hidden;
  opacity: 0;
}

#output {
  color: blue;
}

JavaScript

var $ = document.querySelector.bind(document);
const input = $('#input');
const output = $('#output');
input.addEventListener('input', update);
function update(ev) {
	output.innerHTML = input.innerHTML;
}
update();

input.focus();