JSFiddle - React, Tailwind, and code Playground

HTML

<input id="input" type="text" placeholder="this would be hidden in the real app">
<div id="output">
</div>

CSS

input {
  width: 100%;
}

#cursor {
  width: 8px;
  height: 18px;
  background-color: green;
  display: inline-block;
  opacity: 1;
  animation: blink-animation 1s steps(5, start) infinite;
  -webkit-animation: blink-animation 1s steps(5, start) infinite;
}

@keyframes blink-animation {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@-webkit-keyframes blink-animation {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

JavaScript

var input = document.getElementById('input');
var output = document.getElementById('output');

input.addEventListener('keyup', function() {
  output.removeChild(document.getElementById('cursor'));
	output.innerHTML += input.value;
  input.value = '';
  makeCursor();
});

document.addEventListener('click', function() {
	input.focus();
});

function makeCursor() {
	var cursor = document.createElement('div');
  cursor.setAttribute('id', 'cursor');
  output.appendChild(cursor);
}
makeCursor();