JSFiddle - React, Tailwind, and code Playground

by Cal Francesco

HTML

<ul class="list">
    <li>
        <span class="content-holder">foo</span></li>
    <li>
        <span class="content-holder">foo foo foo foo foo foo</span></li>
    <li class="highlight">
        <span class="content-holder">bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar</span>
    </li>
</ul>

CSS

ul.list {
  list-style-type: none;
  margin-top: 10px;
  padding: 0;
  text-align: left;
  overflow-x: auto;
}

.highlight >span{
    background-color: red;
}

ul.list li {
  margin: 0;
  padding: 0 10px;
}

.content-holder {
      font-family: Consolas,"Liberation Mono",Menlo,Courier,monospace;
  font-size: 12px;
  color: #333;
  white-space: pre;
  overflow: visible;
  -ms-word-wrap: normal;
  word-wrap: normal;
}