JSFiddle - React, Tailwind, and code Playground

HTML

<button>Initial</button><button>C</button><button>Perl</button><button>PHP</button><button>Python</button><button>Ruby</button><div class="code"><span class="pl py rb">#</span><span class="c pl py rb">/*&lt;?php ob_clean();&quot;</span><br class="c pl php py rb"/><span class="c php">s=</span><span class="c pl php">'</span><span class="c pl php py rb">''*/</span><span class="pl php py rb">include&lt;stdio.h&gt;</span><br class="pl php py rb"/><span class="pl php py rb">main($y){char*$s,$t[3],$u[3]</span><span class="c pl php py rb">/*</span><span class="c pl php py">';'</span><span class="c pl php py rb">'</span><span class="c pl php rb">'</span><br class="c pl php rb"/><span class="c pl php rb">def printf(a,*b):import sys;sys.stdout.write(a%b)</span><br class="c pl php rb"/><span class="c pl php rb">for y in range(99,-1,-1):</span><br class="c pl php rb"/><span class="c pl php rb">  '</span><span class="c pl php py rb">'</span><span class="c pl php py">'</span><br class="c pl php py"/><span class="c pl php py">99.downto(0){|y|$y</span><span class="c php py">=</span><span class="c pl php py">y;</span><span class="c pl py">&quot;</span><span class="c pl php py rb">/*</span><span class="c php py rb">=;</span><span class="c pl php py rb">#*/</span><span class="pl py rb">;</span><br class="py rb"/><span class="py rb">for($y=100;$y--;){</span><br class="py rb"/><span class="c pl php py rb">  #/*</span><span class="c pl php py">&quot;</span><br class="c pl php py"/><span class="c py">  $u=(($t=$y)+99)%100;'</span><span class="c pl php py rb">*/</span><br class="c pl php py rb"/><span class="pl php py rb">  sprintf($t,&quot;%d&quot;,$y);sprintf($u,&quot;%d&quot;,($y+99)%100);</span><br class="pl php py rb"/><span class="c pl php py rb">  #//</span><span class="c py">';</span><span class="c pl php py rb">#''</span><span class="c pl php rb">'</span><br class="c"/>  printf(&quot;%s bottle%s of beer on the wall, %s bottle%s of beer.\n%s&quot;,<br /><span class="c pl php py...

CSS

div.code {
    font-family: Consolas, monospace;
    font-size: 14px;
    white-space: pre;
    color: #000000;
}

span {
    vertical-align: top;
    display: inline-block;
}

JavaScript

function showAll() {
    var blurred = $('span,br').filter(function(){
      return $(this).css('opacity') < 1.0;
    });
    if(blurred.length > 0) {
        blurred.each(function() {
            $(this).animate({opacity: 1.0});
        });
    }
}

function showLang(event) {
    var ext = event.data.ext;
    $(ext).each(function() {
        $(this).animate({opacity: 0.25});
    });
    $('span,br').not(ext).each(function() {
        $(this).animate({opacity: 1.00});
    });
 }

$(document).ready(function() {
    $('button:contains(Initial)').click(showAll);
    $('button:contains(C)')      .click({ext: '.c'  }, showLang);
    $('button:contains(Perl)')   .click({ext: '.pl' }, showLang);
    $('button:contains(PHP)')    .click({ext: '.php'}, showLang);
    $('button:contains(Python)') .click({ext: '.py' }, showLang);
    $('button:contains(Ruby)')   .click({ext: '.rb' }, showLang);
});