JSFiddle - React, Tailwind, and code Playground

HTML

<div style="float: left; white-space: pre; line-height: 1; background: #3F3F3F; "><span class="sc2"># A Liquid tag for Jekyll sites that allows embedding Gists and showing code for non-JavaScript enabled browsers and readers.</span><span class="sc0">
</span><span class="sc2"># by: Brandon Tilly</span><span class="sc0">
</span><span class="sc2"># Source URL: https://gist.github.com/1027674</span><span class="sc0">
</span><span class="sc2"># Post http://brandontilley.com/2011/01/31/gist-tag-for-jekyll.html</span><span class="sc0">
</span><span class="sc2">#</span><span class="sc0">
</span><span class="sc2"># Example usage: {% gist 1027674 gist_tag.rb %} //embeds a gist for this plugin</span><span class="sc0">

</span><span class="sc11">require</span><span class="sc0"> </span><span class="sc7">'cgi'</span><span class="sc0">
</span><span class="sc11">require</span><span class="sc0"> </span><span class="sc7">'digest/md5'</span><span class="sc0">
</span><span class="sc11">require</span><span class="sc0"> </span><span class="sc7">'net/https'</span><span class="sc0">
</span><span class="sc11">require</span><span class="sc0"> </span><span class="sc7">'uri'</span><span class="sc0">

</span><span class="sc5">module</span><span class="sc0"> </span><span class="sc15">Jekyll</span><span class="sc0">
  </span><span class="sc5">class</span><span class="sc0"> </span><span class="sc8">GistTag</span><span class="sc0"> </span><span class="sc10">&lt;</span><span class="sc0"> </span><span class="sc11">Liquid</span><span class="sc10">::</span><span class="sc11">Tag</span><span class="sc0">
    </span><span class="sc5">def</span><span class="sc0"> </span><span class="sc9">initialize</span><span class="sc10">(</span><span class="sc11">tag_name</span><span class="sc10">,</span><span class="sc0"> </span><span class="sc11">text</span><span class="sc10">,</span><span class="sc0"> </span><span class="sc11">token</span><span class="sc10">)</span><span class="sc0">
      </span><span...

CSS

span {
    font-family: 'Inconsolata';
    font-size: 12pt;
    color: #DCDCCC;
}
.sc0 {
}
.sc2 {
    font-weight: bold;
    font-style: italic;
    color: #7F9F7F;
}
.sc4 {
    color: #8CD0D3;
}
.sc5 {
    font-weight: bold;
    color: #E3CEAB;
}
.sc6 {
    color: #CC9393;
}
.sc7 {
    color: #DCA3A3;
}
.sc8 {
    font-weight: bold;
    color: #DFE4CF;
}
.sc9 {
    color: #EFEF8F;
}
.sc10 {
    font-weight: bold;
    color: #9F9D6D;
}
.sc11 {
    color: #FFEBDD;
}
.sc12 {
    font-weight: bold;
    color: #CC9393;
}
.sc15 {
    font-weight: bold;
}
.sc16 {
    color: #FFCFAF;
}
.sc20 {
}
.sc21 {
}
.sc29 {
}