JSFiddle - React, Tailwind, and code Playground

by Lazaro Contreras

HTML

<div id="demo" contenteditable="true">
  html
</div>
<div id="show">
  html
</div>

CSS

div {
  width: 100px;
  height: 100px;
  padding: 0;
  margin: 0;
  resize: none;
  background: black;
  color: white;
  font: message-box;
}

JavaScript

var demo = document.getElementById('demo');
var show = document.getElementById('show');

demo.addEventListener('keyup', changes);

function changes() {
  show.innerHTML =
    demo.innerHTML.replace(/\&lt;(.+)\&gt;/gi, '&lt;000$1&gt;');
}