JSFiddle - React, Tailwind, and code Playground

HTML

<pre><code><ol><li><span class='semtok-keyword'>package</span> <span class='semtok-namespace'>main</span></li>
<li></li>
<li><span class='semtok-keyword'>import</span> <span class='semtok-string'>&#34;</span><span class='semtok-namespace'>fmt</span><span class='semtok-string'>&#34;</span></li>
<li></li>
<li><span class='semtok-keyword'>func</span> <span class='semtok-function semtok-mod-definition semtok-mod-signature'>main</span><span class='semtok-bracket  semtok-mod-level1 semtok-mod-paren'>(</span><span class='semtok-bracket  semtok-mod-level1 semtok-mod-paren'>)</span> <span class='semtok-bracket  semtok-mod-level1 semtok-mod-brace'>{</span></li>
<li>	<span class='semtok-variable semtok-mod-definition semtok-mod-chan'>ch</span> <span class='semtok-operator'>:=</span> <span class='semtok-function semtok-mod-defaultLibrary'>make</span><span class='semtok-bracket  semtok-mod-level2 semtok-mod-paren'>(</span><span class='semtok-keyword'>chan</span> <span class='semtok-type semtok-mod-number semtok-mod-defaultLibrary'>float64</span><span class='semtok-bracket  semtok-mod-level2 semtok-mod-paren'>)</span></li>
<li>	<span class='semtok-variable semtok-mod-chan'>ch</span> <span class='semtok-operator'>&lt;-</span> <span class='semtok-number'>1.0e10</span> <span class='semtok-comment'>// magic number</span></li>
<li>	<span class='semtok-variable semtok-mod-definition semtok-mod-number'>x</span>, <span class='semtok-variable semtok-mod-definition semtok-mod-bool'>ok</span> <span class='semtok-operator'>:=</span> <span class='semtok-operator'>&lt;-</span><span class='semtok-variable semtok-mod-chan'>ch</span></li>
<li class="highlight">	<span class='semtok-keyword semtok-mod-control'>defer</span> <span class='semtok-namespace'>fmt</span>.<span class='semtok-function semtok-mod-signature'>Println</span><span class='semtok-bracket  semtok-mod-level2 semtok-mod-paren'>(</span><span class='semtok-string'>`exiting now`</span><span class='semtok-bracket ...

CSS

body {
    background-color: #1E1E1E;
    color: #D4D4D4;
    margin: 0;
    padding: 20px;
}

pre {
    padding: 16px;
    border-radius: 4px;
    overflow-x: auto;
    margin: 0;
    white-space: pre;
    font-size: 14px;
    line-height: 1.4;
    tab-size: 2em;
}

code {
    background-color: #1E1E1E;
    color: #D4D4D4;
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-variant-ligatures: normal;
}

ol {
    display: grid;
    li::marker { 
        content: counters(list-item,'.') '  ';
        color: #6e7681;
    }
}

ol:has(li.highlight) li:not(.highlight) {
    opacity: 0.4;
}

.highlight::marker {
    color: #cccccc;
}

/* VSCode Dark+ Theme Colors */

/* Bracket level colors - cycling through 3 levels */
.semtok-bracket.semtok-mod-level1 {
    color: #ffd700; /* Gold */
}

.semtok-bracket.semtok-mod-level2 {
    color: #da70d6; /* Orchid */
}

.semtok-bracket.semtok-mod-level3 {
    color: #179fff; /* Sky Blue */
}

.semtok-bracket {
    color: red;
}

/* Comments */
.semtok-comment {
    color: #6A9955;
    font-style: italic;
}

/* Keywords */
.semtok-keyword {
    color: #569cd6;
}

/* Strings */
.semtok-string {
    color: #ce9178;
}

/* Numbers */
.semtok-number {
    color: #b5cea8;
}

/* Types */
.semtok-type {
    color: #4EC9B0;
}

/* Functions */
.semtok-function {
    color: #DCDCAA;
}

/* Methods */
.semtok-method {
    color: #DCDCAA;
}

/* Variables */
.semtok-variable {
    color: #9CDCFE;
}

/* Parameters */
.semtok-parameter {
    color: #9CDCFE;
}

/* Namespaces/Packages */
.semtok-namespace {
    color: #4EC9B0;
}

/* Operators */
.semtok-operator {
    color: #D4D4D4;
}

/* Labels */
.semtok-label {
    color: #C8C8C8;
}

/* Modifiers */
/*
.semtok-mod-readonly {
    color: #4FC1FF;
}
.semtok-mod-definition {
}

.semtok-mod-defaultLibrary {
}
*/

.semtok-mod-format {
    color:...