JSFiddle - React, Tailwind, and code Playground

HTML

<form>
  <div class="input-wrap">
    <input name="my_input" />
    <div class="input-display"></div>
  </div>
</form>

CSS

input {
  opacity: 0;
  padding: .2em .5em;
  position: relative;
  z-index: 1;
}
input:focus + div {
  box-shadow: 0 0 10px #69C;
}
.input-wrap {
  position: relative;
  border: 1px solid #aaa;
}
.input-display {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  padding: .2em .5em;
  overflow: hidden;
}

Babel + JSX

$('[name="my_input"]').on('focus', ev => {
	console.log('focus');
}).on('keyup', ev => {
	$('.input-display').text(ev.target.value);
});