JSFiddle - React, Tailwind, and code Playground

HTML

<div style="background:red; position:relative; width:100%; height:500px; z-index:0;" id='behind' >

    <textarea name="Name"style="background:green; border:none; height:100px; width:250px; position:absolute; top:0; left:0; z-index:1;" 
       id='area1' onFocus='runOnFocus()' onkeypress="change()" ></textarea>
<div id='area1Replacer' style="background:yellow; display:none; position:absolute; z-index:2;"></div>
</div>

JavaScript

function runOnFocus(){
console.log("running");
 
     var area1 = document.getElementById("area1");
     var replacer = document.getElementById("area1Replacer");    
     replacer.offsetTop = area1.offsetTop;
     replacer.offsetLeft = area1.offsetLeft;
     replacer.style.height = area1.style.height;
     replacer.style.width = area1.style.width;
     replacer.style.display = "block";
     console.log("h:" + area1.style.height);
     var behind = document.getElementById("behind").style.background = 'black';    
}

function change(){
    console.log("bla");
    var el1 = document.getElementById("area1");
    var el2 = document.getElementById("area1Replacer");
    el2.innerHTML = el1.value;      
    var behind = document.getElementById("behind").style.background = 'white';
}

document.getElementById("area1").onfocus = runOnFocus;
document.getElementById("area1").onkeypress = change;