JSFiddle - React, Tailwind, and code Playground

by lid0

HTML

<pre style='white-space: normal'>
    <code class='hljs' style='white-space: normal;padding:0px;margin:0px;'>
<ol  class='start' start="10" style='counter-reset: li-counter 100;'>
<li>ol {background:#036 url(/img/gutter.gif) 2.3em 0 repeat-y;overflow:auto;font-family:"Courier New",Courier,mono;margin:0;padding:1em 0 1em 2.8em;color:#fff;width:90%}</li>
<li>ol li {background:#ffc;font-size:small;}</li>
<li>ol code {color:#036;}</li>
</ol>
    </code>
</pre>

CSS

pre ol { background:#EBEBEB;
    padding-top:5px;
    padding-bottom:5px;
    overflow:auto;
    font-family:"Courier New",Courier,mono; margin:0;
    color:#fff; width:90%;
    word-break: break-word;
    padding-left:45px;
    margin:0;
} 
pre ol li { background:#fff; font-size:small;color:#000;
    border-bottom:1px solid #E3E3E3;
    width:99%;
      padding-left:5px;
}
pre ol {
    counter-reset: li-counter;
    list-style-type: none;
}
pre li:before {
    background-color:#cfcfcf;
    position: absolute;
    left:15px;
    width:38px;
    display:inline-block;
    color:#fff;
    text-align:right;
    font-weight: bold;
    text-align: right;
    z-index: 1;
    overflow: hidden;
    content: counter(li-counter);
    counter-increment: li-counter;
    
}