JSFiddle - React, Tailwind, and code Playground

HTML

<form id="myform">
    <textarea id="source" rows="10" cols="40"></textarea>
    <textarea id="mirror" rows="10" cols="40"></textarea>
</form>

CSS

#myform textarea {
    border: 1px solid #000;
    position: absolute;
}
#source {
    background: transparent;
    z-index: 1;
}
#mirror {
    color: rgba(0,0,0,0.5);
    z-index: -1;
}

JavaScript

$("#source").keyup(function() {
    $("#mirror").val($("#source").val().replace(/\n/g,"¶\n"));
});