JSFiddle - React, Tailwind, and code Playground

HTML

<ol class="tour">
    <li>First thing's first</li>
    <li>Second's the best</li>
    <li>Why not third?, Because I though it was the best. WOW its working now yo man ! some text data !! </li>
    <li>How about fourth?</li>
</ol>

CSS

.wrapper {
    width: 450px;
}
ol.tour {
    counter-reset: tour;
    list-style-type: none;
}
.tour li:before {
    counter-increment: tour;
    content:"Tour " counter(tour)": ";
}
li {
    white-space: nowrap;
}