JSFiddle - React, Tailwind, and code Playground

by adamschwartz

HTML

<pre><code><line>.tooltip {</line>
<line>  font-size: 10px;</line>
<line>  background: yellow;</line>
<line>  color: #111;</line>
<line>  position: absolute;</line>
<line>}</line>
<line></line>
<line>.tooltip.about {</line>
<line>  content: "This tooltip describes what this website is about. It is really long which causes it to wrap to a second line."</line>
<line>}</line>
<line></line>
<line>.tooltip.help {</line>
<line>  background: red;</line>
<line>  color: #fff;</line>
<line>  content: "This tooltip helps you out. It is really long which causes it to wrap to a second line."</line>
<line>}</line></code></pre>

CSS

html {
  font-size: 10px;
  background: #fffff8;
  color: #111;
}

pre {
  font-family: Inconsolata, Monaco, monospace;
  line-height: 1.4;
  font-size: 1.2em;
  padding: 1em;
  white-space: pre-wrap;
  word-wrap: normal;
  color: inherit;
  box-shadow: 0 0 0 1px red /* for demo */;
}

pre > code > line {
  display: inline-block;
  text-indent: -7em;
  margin-left: 7em;
}