JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<figure class="highlight multi"><figcaption><a href="http://stackoverflow.com/questions/35140300/register-a-js-function-in-hexo" target="_blank" rel="external">stack overflow</a><ul class="tabs"><li class="tab active">js</li><li class="tab">scss</li><li class="tab">html</li></ul></figcaption><div class="tabs-content"><figure class="highlight js" style="display: block;"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code" style="width: 671px;"><pre style="width: 671px;"><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">$initHighlight</span>(<span class="params">block, flags</span>) </span>{</span><br><span class="line">  <span class="keyword">try</span> {</span><br><span class="line">    <span class="keyword">if</span> (block.className.search(<span class="regexp">/\bno\-highlight\b/</span>) != <span class="number">-1</span>)</span><br><span class="line">      <span class="keyword">return</span> processBlock(block.function, <span class="literal">true</span>, <span class="number">0x0F</span>) + <span class="string">' class=""'</span>;</span><br><span class="line">  } <span class="keyword">catch</span> (e) {</span><br><span class="line">    <span class="comment">/* handle exception */</span></span><br><span class="line">    <span class="keyword">var</span> e4x =</span><br><span class="line">        <span...

CSS

@charset "UTF-8";
html {
      font-family: "Open Sans", sans-serif;
      font-size: 62.5%;
      -ms-text-size-adjust: 100%;
      -webkit-text-size-adjust: 100%;
      text-size-adjust: 100%;
      -webkit-tap-highlight-color: transparent;
      tap-highlight-color: transparent; }

    body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      background: white;
      font-family: "Open Sans", sans-serif;
      font-size: 1.6rem;
      line-height: 1.9em;
      letter-spacing: 0.01em;
      -webkit-font-smoothing: subpixel-antialiased;
      font-smoothing: subpixel-antialiased; }
      body.pushed {
        overflow-x: hidden; }
p {
  margin: 0 0 1.5em 0; }

ul,
ol,
dl {
  margin: 0 0 0.5em 0; }

a, a:hover, a:active, a:visited {
  cursor: pointer;
  color: #349ef3;
  text-decoration: none; }

a:hover {
  color: #349ef3;
  text-decoration: underline; }

table {
  width: 100%;
  background: transparent;
  border-collapse: collapse;
  border-spacing: 0;
  text-align: left; }
  table th {
    padding: 5px 10px;
    font-weight: bold;
    border-bottom: 2px solid #909ba2; }
  table td {
    padding: 5px 10px; }
  table tr:nth-child(2n) {
    background: #f7f8f8; }

figure.highlight {
  background: #f7f8f8;
  margin: 10px 0;
  line-height: 1.3em;
  color: #333;
  padding-top: 15px;
  padding-bottom: 15px;
  overflow: hidden; }
  figure.highlight table {
    display: block;
    width: 100%; }
  figure.highlight pre,
  figure.highlight .gutter,
  figure.highlight .code,
  figure.highlight .tag {
    background-color: inherit;
    font-family: Menlo;
    border: none;
    padding: 0;
    margin: 0;
    cursor: text; }
  figure.highlight.plain .gutter {
    display: none; }
  figure.highlight figcaption {
    font-size: 1.3rem;
    padding: 0 15px 20px;
    margin: 0;
    background: #f7f8f8;
    color: #999999; }
    figure.highlight figcaption a {
      float: right; }
  figure.highlight .gutter {
    background: #f7f8f8;
   ...

JavaScript

$(document).ready(function() {
        $('.highlight.multi').find('.tab').click(function() {
            var $codeblock = $(this).parent().parent().parent();
            var $tab = $(this);
            // remove `active` css class on all tabs
            $tab.siblings().removeClass('active');
            // add `active` css class on the clicked tab
            $tab.addClass('active');
            // hide all tab contents
            $codeblock.find('.highlight').hide();
            // show only the right one
            $codeblock.find('.highlight.' + $tab.text()).show();
        });
    });