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">/*({[][}])*/

// ({[][}])

/*({[][}])
({[][}])*/
{}{}{]{}
{}()[]
([{}])</textarea>
<pre id="output"></pre>

CSS

body {
    background: #333;
    font-family: arial;
}
#input {
    outline: none;
}
#output {
    color: grey;
}

JavaScript

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

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

function update () {
debugger;
	var errorMessage;
	
	try {
		var blockComments = balanced.matches({source: input.value, open: '/*', close: '*/'}),
			singleLineComments = balanced.getRangesForMatch(input.value, /^\s*\/\/.+$/gim);

		balanced.matches({
			source: input.value,
			open: ['('],
			close: [')'],
			balance: true,
			exceptions: true,
			ignore: Array.prototype.concat.call([], blockComments, singleLineComments)
		});
	} catch (error) {
		errorMessage = error.message || '';
	}
	
	input.style.border = '10px solid ' + (errorMessage ? 'red' : 'green');
	output.innerHTML = errorMessage || '';
}
update();