JSFiddle - React, Tailwind, and code Playground

by Igor

HTML

<nav id="pagination" aria-label="...">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#"></a></li>
    <li class="page-item"><a class="page-link" href="#"></a></li>
    <li class="page-item active">
      <a class="page-link" href="#"></a>
    </li>
    <li class="page-item"><a class="page-link" href="#"></a></li>
    <li class="page-item"><a class="page-link" href="#"></a></li>
  </ul>
</nav>

CSS

.pagination {
  counter-reset:  page-item; // Название списка
  list-style: none; // Убираем маркеры списка
  padding:0;
  margin: 0;
}
.page-item .page-link:before { content: counter(page-item); counter-increment: page-item;}