JSFiddle - React, Tailwind, and code Playground

by Nicholas Berlette

HTML

<div id="app">
    <div class="root2kECv">
      <div class="content1cf1o">

                  <section class="root">
                    <div class="content">
                      <div class="code sh">
												<div class="chrome"><i></i><i></i><i></i></div>
                        <pre><code>pnpm i -g @canbus/dbc</code><code>dbc init</code></pre>
                      </div>
                    </div>
                  </section>
          </div>
        </div>
        <script async="" defer="" src="//buttons.github.io/buttons.js"></script>

        <script type="text/javascript" id="">
          function getSelectionText() {
            var a = "";
            window.getSelection ? a = window.getSelection().toString() : document.selection && "Control" != document.selection.type && (a = document.selection.createRange().text);
            return a
          }
          document.addEventListener("copy", function(a) {
            dataLayer.push({
              event: "textCopied",
              clipboardText: getSelectionText(),
              clipboardLength: getSelectionText().length
            })
          });

        </script>

CSS

.root, :root {
  background: #202123;
  color: #fff;
  padding: 2rem 1rem
}

::selection {
	background-color: transparent;
}

@media (min-width: 450px) {
  .root {
    padding:4rem 1.5rem
  }
}

.content {
  max-width: 40em;
  margin: 0 auto
}

.code {
  background: #32373e;
  padding: 1rem;
  border-radius: 4px
}

.code pre, .code pre code {
  font-family: SF Mono,Menlo,Monaco,monospace;
  line-height: 1.75;
  margin: 0;
  padding: 0
}

.code pre {
	  font-size: 0.63em;
}

.chrome {
  line-height: 0.8rem;
  top: 0.8rem;
  left: 0.8rem;
  margin-bottom: 1rem
}

.chrome > i {
  display: inline-block;
  vertical-align: top;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  margin-right: 0.5rem;
}

.chrome > i:first-child {
  background: #f35f56
}

.chrome > i:nth-child(2) {
  background: #fce35f
}

.chrome > i:nth-child(3) {
  background: #56cc7e
}


pre{
    counter-reset: line;
		position: relative;
}
pre > code {
		font-size: 1.4em;
    counter-increment: line;
		display: block;

		left: 2em;
		position: relative;
}
pre > code::selection {
		background-color: #0004;
}
pre > code::before {
    content: counter(line);
		/* margin-right: 1em; */
 	 	opacity: 0.4;
		-webkit-user-select: none !important;
		user-select: none !important;
		cursor: default;
		transition: opacity 0.33s ease-in;
		position: absolute; 
		left: -1.33em;
}
pre > code:hover::before {
	opacity: 0.6;
}