JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="pagination">
        {% if films.has_previous %}
            <!-- Показывам кнопку со ссылкой, если есть предыдущая страница -->
            <li class="page-item">
                <a class="page-link" href="?page={{ films.previous_page_number }}">&lt;&nbsp; Вперед</a>
            </li>
        {% else %}
            <!-- Показываем неактивную кнопку, если предыдущей страницы нет -->
            <li class="page-item">
                <a class="page-link" href="">&lt;&nbsp; Вперед</a>
            </li>
        {% endif %}

        <!-- Прибавляем к номеру текущей страницы -4 (т.е. отнимаем 4) -->
        {% if films.number|add:'-4' > 0 %}
            <!-- Если до текущей страницы есть больше 4 страниц, показываем многоточие -->
            <li class="page-item">
                <a class="page-link" href="">...</a>
            </li>
        {% endif %}

        {% if films.number|add:'-3' > 0 %}
            <!-- Если до текущей страницы есть ещё три страницы -->
            <li class="page-item">
                <a class="page-link" href=?page="{{ films.number|add:'-3' }}">{{ films.number|add:'-3' }}</a>
            </li>
        {% endif %}
        {% if films.number|add:'-2' > 0 %}
            <!-- Если до текущей страницы есть ещё две страницы -->
            <li class="page-item">
                <a class="page-link" href="?page={{ films.number|add:'-2' }}">{{ films.number|add:'-2' }}</a>
            </li>
        {% endif %}
        {% if films.number|add:'-1' > 0 %}
        <!-- Если до текущей страницы есть ещё одна страница -->
            <li class="page-item">
                <a class="page-link" href="?page={{ films.number|add:'-1' }}">{{ films.number|add:'-1' }}</a>
            </li>
        {% endif %}

        <!-- Номер текущей страницы -->
        <li class="page-item active">
            <a class="page-link" href="?page={{ films.number }}">{{ films.number }}<span class="sr-only">(current)</span></a>
        </li>

        {% if...