JSFiddle - React, Tailwind, and code Playground

HTML

<div class="test">
  <div class="test-text">
    <div class="test-text-title">Заголовок</div>
  </div>
  <div class="test-text">
    <div class="test-text-title">Заголовок</div>
  </div>
  <div class="test-text">
    <div class="test-text-title">Заголовок</div>
  </div>
  <div class="test-text">
    <div class="test-text-title">Заголовок</div>
  </div>
  <div class="test-text">
    <div class="test-text-title">Заголовок</div>
  </div>
  <div class="test-text">
    <div class="test-text-title">Заголовок</div>
  </div>
</div>

SCSS

.test {
  counter-reset: myCounter;

  &-text {
    padding: 20px;
    display: flex;

    &-title {
      &:before {
        counter-increment: myCounter;
        content: counter(myCounter);
        display: inline-block;
        text-align: center;
        line-height: normal;
        height: auto;
        width: auto;
        margin: 0 10px 0 0;
      }
    }
  }
}