JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/ccampbell/rainbow/master/js/rainbow.min.js"></script>
<script src="https://raw.github.com/ccampbell/rainbow/master/js/language/css.js"></script>
<pre class="rainbow"><code data-language="CSS">body {
  font-size: @font-size;
  text-align: justify;
  line-height: 1.6;

  font-family: 'Georgia';

  color: @dark;
  background-color: @light;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Open Sans';
  text-transform: uppercase;
  font-weight: 800;
}</code></pre>

<h2>Try copying and pasting the code here</h2>

<textarea></textarea>

CSS

/**
 * Obsidian theme
 *
 * Adapted from a theme based on:
 * http://studiostyl.es/schemes/son-of-obsidian
 *
 * @author Dan Stewart <[email protected]>
 * @version 1.0
 */
pre {
    background: #22282A;
    word-wrap: break-word;
    margin: 0px;
    padding: 0px;
    padding: 10px;
    color: #F1F2F3;
    font-size: 14px;
    margin-bottom: 20px;
}

pre, code {
    font-family: 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', 'Monaco', Courier, monospace !important
}

pre .comment {
    color: #66747B;
}

pre .constant {
    color: #EC7600;
}

pre .storage {
    color: #EC7600;
}

pre .string, pre .comment.docstring {
    color: #EC7600;
}

pre .string.regexp, pre .support.tag.script, pre .support.tag.style {
    color: #fff;
}


pre .keyword, pre .selector {
    color: #93C763;
}

pre .inherited-class {
    font-style: italic;
}

pre .entity {
    color: #93C763;
}

pre .integer {
    color: #FFCD22;
}

pre .support, *[data-language="csharp"] .function.call {
    color: #FACD22;
}

pre .variable.global, pre .variable.class, pre .variable.instance {
    color: #CCC;
}

/* C# specific rule */
pre .preprocessor {
    color: #66747B;
}

@import 'css/normalize.css';

@import 'fonts/Open Sans/font.css';

@import 'fonts/Playfair Display/font.css';
.centered {
  margin-left: auto;
  margin-right: auto;
}
.monospace {
  font-family: 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', 'Monaco', Courier, monospace !important;
}
body {
  font-size: 1em;
  text-align: justify;
  line-height: 1.6;
  font-family: 'Georgia';
  color: #383838;
  background-color: #f2f2f2;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Open Sans';
  text-transform: uppercase;
  font-weight: 800;
}
a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
  color: #e05c5c;
}
a:hover {
  color: #e77e7e;
  border-bottom: 1px dotted #e05c5c;
}
a.anchor {
  float: right;
  width: 1.2em;
  vertical-align: middle;
  text-align: right;
  color: #e6e6e6;
  border-bottom: none;
}
a.anchor:hover {
 ...

JavaScript

if (window.Rainbow) window.Rainbow.linecount = (function(Rainbow) {
    Rainbow.onHighlight(function(block) {
        var $block = $(block);
        var $dummy = $block.clone().empty();
        var $lines = $('<table />', {class: 'rainbow'}).appendTo($dummy);
        var $header = $('<tr />', {class: 'rainbow-header'}).appendTo($lines);

        $('<th />').appendTo($header);
        $('<th />', {class: 'rainbow-language'}).text($block.data('language')).appendTo($header);

        var lines = $block.html().split('\n');

        $.each(lines, function(index, value) {
            index++;

            var $row = $('<tr />', {class: 'rainbow-line rainbow-line-' + index});

            $('<td />', {class: 'rainbow-line-number'}).text(index).appendTo($row);
            $('<td />', {class: 'rainbow-line-code'}).html(value).appendTo($row);

            $lines.append($row);
        });

        $block.replaceWith($lines);
    });
})(window.Rainbow);