JSFiddle - React, Tailwind, and code Playground

HTML

<div id='container'>
    <textarea></textarea>
    <div id='mirror'></div>
</div>

CSS

/* container */
#container { position: relative; }

/* textarea and mirror */
textarea, #mirror {
    width: 400px;
    height: 200px;
    font-family: monospace;
    font-size: 16px;
    line-height: 1.5;
    padding: 8px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* textarea */
textarea { color: transparent; caret-color: black; }
textarea::selection { background: #ff06; }

/* mirror */
#mirror {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1000;
    border-color: transparent;
}
#mirror mark {
    background: transparent;
    color: red;
}

JavaScript

//elements
const ta = document.querySelector('textarea');
const mirror = document.querySelector('#mirror');

//main function
const callback = () => {
    mirror.innerHTML = ta.value.replace(/^\/\/[^\n]+$/mg, '<mark>$&</mark>');
    mirror.scrollTop = ta.scrollTop;
    mirror.scrollLeft = ta.scrollLeft;
};

//call the function on field input and scroll
ta.addEventListener('input', callback);
ta.addEventListener('scroll', callback);