JSFiddle - React, Tailwind, and code Playground

HTML

<pre class="codeblock">
<div class="codeblock">function helloWorld() {
    console.log('Hello, World!');
}</div>
<div class="codeblock">function outerFunction() {
    console.log('Outer function.');
    <div class="codeblock">function innerFunction1() {
    console.log('First inner function.');
        <div class="codeblock">function innerInnerFunction() {
        console.log('Inner inner function.');
}</div>
}</div></div>
</pre>

CSS

* {
    font-family: 'courier new', monospace;
    font-size: 10px;
}

.codeblock {
    border: 1px solid rgba(0,0,0,.5);
    border-radius: 10px;
    padding: 10px;
}

.codeblock .codeblock {
    margin-left: 15px;
}

JavaScript

$(function () {
    // variables
    var colors = ['rgba(0,0,0,.1)', 'rgba(0,0,0,.2)'], colorSelected = 'rgba(255, 255, 0, .2)', currentBlock = null;
    // click handlers
    $('.codeblock').click(function (e) {
        resetCurrentBlock();
        currentBlock = {el: $(this), bg: $(this).css('background')};
        $(this).css({background: colorSelected});
        e.stopPropagation();
    });
    $('html').click(function(e) {
        resetCurrentBlock();
        currentBlock = null;
        e.stopPropagation();
    });
    // Initial block coloring
    colorBlocks($('pre.codeblock'), 0);
    function colorBlocks(block, index) {
        block.css({background: colors[index]});
        $(block).children('.codeblock').each(function () {
             colorBlocks($(this), (index + 1) % 2);
        });
    }
    function resetCurrentBlock() {
        if (currentBlock !== null) {
            currentBlock.el.css({background: currentBlock.bg});
        }
    }
});