JSFiddle - React, Tailwind, and code Playground

by BramVanroy

HTML

<div id="page-wrapper">
  <aside id="legend">
    <ul>
      <li>
      <span class="annotator-1">Annotator 1</span>
      </li>
      <li>
        <span class="annotator-2">Annotator 2</span>
      </li>
      <li>
        <span class="annotator-3">Annotator 3</span>
      </li>
    </ul>
  </aside>
  <p>
    That could be
    <span class="annotator-1">worth
      <span class="annotator-2">an
        <span class="annotator-3">extra several-hundred billion</span>
      </span>
    </span> right there . <sub>(aapl15 s24)</sub>
  </p>
  <p>
    Strong outlooks built on lower taxes and favorable currency exchange rates may not
    <span class="annotator-1">be
      <span class="annotator-2">enough to
        <span class="annotator-3">cut it</span>
      </span>
    </span>
    <span class="annotator-3"> in this market</span>
    . <sub>(jnj04 s19)</sub>
  </p>
  <p>
    Chevron Corp. is not
    <span class="annotator-1">shy about
      <span class="annotator-2">touting</span>
    </span>
    <span class="annotator-2"> its
      <span class="annotator-3">1.7 million acres of real estate</span>
    </span>
    <span class="annotator-3"> in the prolific Permian basin</span> [...] . <sub>(cvx05 s03)</sub>
  </p>
  <p>
    Those
    <span class="annotator-2">
      <span class="annotator-1">positives outweigh</span> the fact that the futuristic Buck Rogers stuff may
      <span class="annotator-3">take a while</span>
    </span> . <sub>(aapl15 s52)</sub>
  </p>
  <p>
    CVS , though , might be able to <span class="annotator-2"><span class="annotator-1">leverage its pharmacy-benefit manager unit</span> to <span class="annotator-1"><span class="annotator-3">reduce its risk</span></span></span> [...] . <sub>(amzn12 s20)</sub>
  </p>
</div>

CSS

@page {
  size: A4;
}

@font-face {
  font-family: "Computer Modern";
  src: url('http://mirrors.ctan.org/fonts/cm-unicode/fonts/otf/cmunss.otf');
}

@font-face {
  font-family: "Computer Modern";
  src: url('http://mirrors.ctan.org/fonts/cm-unicode/fonts/otf/cmunsx.otf');
  font-weight: bold;
}

@font-face {
  font-family: "Computer Modern";
  src: url('http://mirrors.ctan.org/fonts/cm-unicode/fonts/otf/cmunsi.otf');
  font-style: italic, oblique;
}

@font-face {
  font-family: "Computer Modern";
  src: url('http://mirrors.ctan.org/fonts/cm-unicode/fonts/otf/cmunbxo.otf');
  font-weight: bold;
  font-style: italic, oblique;
}

body {
  font-family: "Computer Modern", sans-serif;
  counter-reset: example;
}

#page-wrapper {
  width: 700px;
}

p::before {
  counter-increment: example;
  content: counter(example) ") "; 
}

p span[class^="annotator-"] {
  background-repeat: repeat-x;
  background-position: 0 100%;
}

p span.annotator-1 {
  line-height: 22px;
  padding-bottom: 2px;
  background-image: linear-gradient(to right, green 75%, green 100%);
  background-size: 20px 2px;
}

p span.annotator-2 {
  line-height: 27px;
  padding-bottom: 7px;
  background-image: linear-gradient(to right, red 75%, transparent 75%);
  background-size: 22px 2px;
}

p span.annotator-3 {
  line-height: 32px;
  padding-bottom: 12px;
  background-image: linear-gradient(to right, blue 75%, transparent 75%);
  background-size: 10px 2px;
}

#legend {
  float: right;
}

#legend ul {
  background: #fff;
  border: 1px solid #000;
  padding: 2px 0;
  list-style: none;
}

#legend ul li {
  padding: 4px 15px;
}

#legend ul li span {
  display: block;
}

#legend span::before {
  content: "";
  display: inline-block;
  width: 50px;
  height: 3px;
  vertical-align: middle;
  background-repeat: repeat-x;
  margin-right: 8px;
}

#legend span.annotator-1::before {
  background-image: linear-gradient(to top, green 2px, white 2px, transparent 2px);
}

#legend span.annotator-2::before {
 ...