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 () {
    var errorMessage;
    
    try {
        balanced.matches({source: input.value, open: ['{{', '[['], close: [']]', '}}'], balance: true, exceptions: true});
    } catch (error) {
        errorMessage = error.message;
    }
    
    input.style.border = '10px solid ' + (errorMessage ? 'red' : 'green');
    output.innerHTML = errorMessage || '';
}
update();