JSFiddle - React, Tailwind, and code Playground

HTML

<ol>
  <li data-startTime="00:00" data-endTime="00:01">Is this the real life?</li>
  <li data-startTime="00:01" data-endTime="00:02">Is this just fantasy?</li>
  <li data-startTime="00:04" data-endTime="00:05">Caught in a landslide,</li>
  <li data-startTime="00:05" data-endTime="00:06">no escape from reality.</li>
</ol>

CSS

ol {
  margin: 2em;
  padding: 0;
  list-style: none;
}
li::before {
  content: '[' attr(data-startTime) '-' attr(data-endTime) ']';
  font-size: smaller;
  color: grey;
  margin-right: 1em;
}