JSFiddle - React, Tailwind, and code Playground

HTML

<div id="input" contenteditable="true"></div>
<br>
<div id="output"></div>

CSS

#input {
  height: 100px;
  width: 200px;
  text-align:center;
  line-height:25px;
  border: 10px solid black;
  resize: none;
  overflow: none;
  white-space: pre-wrap;
}

#output {
  height: 80px;
  width: 200px;
  text-align:center;
  line-height:25px;
  border: 10px solid blue;
  background:blue;
  color:#ff0000;
}

JavaScript

$(function() {
  $("#input").keyup(function() {
   content = $('#input').html().replace(/\n/g,'<br/>');
  $("#output").html(content);
  });
});