JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgit.com/icodeforlove/node-balanced/master/dist/balanced-min.js"></script>
<textarea id="input" cols="75" rows="10">some text(text here(possible text)text(possible text(more text)))end text(some more text)</textarea>
<div id="output"></div>

CSS

body {
    background: #333;
    font-family: arial;
}
#output {
    color: grey;
}
.match {
    color: #1891e7;
}
.head, .tail {
    font-weight: bold;
    color: white;
}

JavaScript

var input = document.querySelector('#input'),
    output = document.querySelector('#output');

input.addEventListener('keydown', update);
input.addEventListener('keyup', update);
input.addEventListener('change', update);

function update () {
    output.innerHTML = balanced.replacements({
        source: input.value,
        open: '{',
        close: '}',
        replace: function (source, head, tail) {
            return '<span class="match"><span class="head">' + head + '</span>' + source + '<span class="tail">' + tail + '</span></span>';
        }
    });
}
update();