JSFiddle - React, Tailwind, and code Playground

HTML

<div class="content">
    <pre id="editable" contenteditable></pre>
    <textarea></textarea>
</div>

CSS

.content textarea {
    opacity: 0;
    height: 0;
    width: 0;
}
.content #editable {
    border: solid 1px #222;
}

.content #editable.pseudo-focus {
    outline:none;
    border-color:#9ecaed;
    box-shadow:0 0 10px #9ecaed;
}

JavaScript

var contentEditable = document.querySelector('.content pre'),
        textarea = document.querySelector('.content textarea');

contentEditable.addEventListener('click', function() {
    textarea.focus();
    contentEditable.classList.add('pseudo-focus');
});
textarea.addEventListener('keyup', function(e) {
    contentEditable.innerText = textarea.value;
    
    if (textarea.value.match(/\n$/)) {
        alert('newline');
    }
});