JSFiddle - React, Tailwind, and code Playground

by anton4ept

HTML

<div id="myInput">
  <div id="render"></div>
  <input id="input">
</div>

CSS

#myInput {
  position: relative;
}

#input, #render {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 1.3em;
}

#input {
  opacity: 0;
}

#render {
  outline: 1px solid red;
  overflow: hidden;
}

 #render.focus {
   outline: 1px solid blue;
 }

JavaScript

var el = document.getElementById('input');
var r = document.getElementById('render');

el.addEventListener('focus', function() {
	r.className = 'focus';
});

el.addEventListener('blur', function() {
	r.className = '';
});

el.addEventListener('keyup', function() {
	r.innerHTML = el.value;
});