JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">

<pre class="code numbering color"><code class="CSS" language="CSS" contenteditable="true"><span class="number"></span><span class="wrapper"><span class="whitespaces"></span><span class="non_whitespaces">@font-face {</span></span>
<span class="number"></span><span class="wrapper"><span class="whitespaces"></span><span class="non_whitespaces"></span></span>
<span class="number"></span><span class="wrapper"><span class="whitespaces">  </span><span class="non_whitespaces">font-family: "My Font";</span></span>
<span class="number"></span><span class="wrapper"><span class="whitespaces">  </span><span class="non_whitespaces">src: url("myfont.woff2") format("woff2"),</span></span>
<span class="number"></span><span class="wrapper"><span class="whitespaces">       </span><span class="non_whitespaces">url("myfont.woff") format("woff") url("myfont.woff") frmat("woff") url("myfont.woff") format("woff") url("myfont.woff") format("woff") url("myfont.woff") format("woff");</span></span>
<span class="number"></span><span class="wrapper"><span class="whitespaces"></span><span class="non_whitespaces"></span></span>
<span class="number"></span><span class="wrapper"><span class="whitespaces">  </span><span class="non_whitespaces"></span></span>
<span class="number"></span><span class="wrapper"><span class="whitespaces"></span><span class="non_whitespaces">src: url("myfont.woff2") format("woff2");</span></span>
<span class="number"></span><span class="wrapper"><span class="whitespaces"></span><span class="non_whitespaces">}</span></span>
</code></pre>

</div>

CSS

#wrapper {
  margin: 0 auto;
  max-width: 500px;
  display: block;
}



pre.code {
  margin-left: -7px;
  padding-left: 7px;
  border-left: 1px solid #eee;
}

pre.code code {
  display: block;
  font-size: 12px;
  line-height: 20px;
  font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', monospace;
  white-space: pre-wrap;
  word-break: break-all;
  background: rgba(0, 0, 0, 0);
}

pre.numbering {
  counter-reset: line;
}

span.number {
  counter-increment: line;
}

span.number::before {
  margin-left: -48px;
  float: left;
  content: counter(line, decimal);
  width: 32px;
  display: inline-block;
  color: rgba(0,0,0,0.3);
  font-size: 12px;
  line-height: 20px;
  text-align: right;
  vertical-align: middle;
}

span.wrapper {
  display: inline-block;
}

span.whitespaces {
  display: inline-block;
  float: left;
}

span.non_whitespaces {
  display: table;
}