JSFiddle - React, Tailwind, and code Playground

HTML

<article>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
 ...

CSS

article {
  counter-reset: paragraphs; /* «инициализируем» счетчик */
}

p {
  counter-increment: paragraphs; /* инкрементируем счетчик */
}

p:before {
  content: counters(paragraphs, ".", decimal-leading-zero); /* выводим текущий показатель счетчика в нужном формате */
}









body {
  padding: 1em 0 0 1em;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  letter-spacing: 1px;
}

p {
  margin: 0 0 1em 0;
}

p {
  font-family: monospace;
  letter-spacing: 1px;
}

*:before {
  font-weight: bold;
  margin-right: .5em;
  letter-spacing: 2px;
  color: #0043ff;
  border-bottom: 1px solid rgba(0, 67, 255, 0.35);
}