JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <span class="marker"><span class="marker"><span class="marker">
    consectetur adipiscing elit. Nam at sem eu ligula porttitor iaculis volutpat non lacus. Nam quis risus magna, vitae interdum sapien. Quisque lacinia ullamcorper mi eget molestie. Suspendisse dignissim, arcu mollis dignissim vestibulum, tortor ipsum mollis nunc, eu faucibus quam lacus in mauris. Vestibulum sed est neque, nec adipiscing tortor. Sed accumsan venenatis ornare. Pellentesque blandit lectus in tortor eleifend tempor. Nulla accumsan massa sit amet massa fermentum volutpat vel nec nisi. Fusce vestibulum ante adipiscing nibh porttitor pulvinar. Nulla facilisi. Fusce eu massa enim, nec pharetra nisl. Maecenas lacus sem, tristique et lacinia et, gravida vitae dolor.
  </span></span></span>
</div>

CSS

.container {
    width: 480px;
    margin: 0 auto;
    background: #dff;
    /* necessary to keep markered text inside */
    padding: 0 10px;
  }

.marker {
    background: #f77;
    padding: 3px 0;
    position: relative;
    left: -10px;
    line-height: 30px;
}

.marker .marker {
    left: 20px;
}

.marker .marker .marker {
    left: -10px;
}