JSFiddle - React, Tailwind, and code Playground

by Michaël van de Weerd

HTML

<pre>
<code>var nav = [{</code>
<code>  "value" : "hello",</code>
<code>  "reference" : {</code>
<code>    "some" : "more"</code>
<code>  }</code>
<code>}];</code>
</pre>

CSS

* {
  box-sizing: border-box;
  border: none;
  margin: 0;
  padding: 0;
}

html {
  background-color: white;
}

pre {
  padding: 8px;
  padding-left: 64px;
  border: 1px solid #CCCCCC;
  counter-reset: pre-code;
  position: relative;
}

code {
  font-family: monospace;
}

pre > code {
  width: 100%;
  display: inline-block;
  counter-increment: precode;
  cursor: default;
  overflow: hidden;
}

pre > code:hover, pre > code:hover::before {
  background-color: #EEEEEE;
}

pre > code::before {
  width: calc(64px - 8px);
  left: 8px;
  content: counter(precode);
  display: inline-block;
  position: absolute;
  -webkit-user-select: none;
}