Pagination widget using TailwindCSS markup

pagination.html

{% load query_params_tags %}

<div class="grid md:grid-cols-12 grid-cols-1 mt-8">
    <div class="md:col-span-12 text-center">
        <nav aria-label="Page navigation example">
            <ul class="inline-flex items-center -space-x-px">
                {% if page_obj.has_previous %}
                    <li><a href="{% modify_query page=page_obj.previous_page_number %}" class="size-[40px] inline-flex justify-center items-center text-slate-400 bg-white dark:bg-slate-900 rounded-s-3xl hover:text-white border border-gray-100 dark:border-gray-800 hover:border-sky-600 dark:hover:border-sky-600 hover:bg-sky-600 dark:hover:bg-sky-600"><i class="uil uil-angle-left text-[20px] rtl:rotate-180 rtl:-mt-1"></i></a></li>
                    {% if page_obj.number > 3 %}
                        <li><a href="{% modify_query page=1 %}" class="size-[40px] inline-flex justify-center items-center text-slate-400 hover:text-white bg-white dark:bg-slate-900 border border-gray-100 dark:border-gray-800 hover:border-sky-600 dark:hover:border-sky-600 hover:bg-sky-600 dark:hover:bg-sky-600">1</a></li>
                        {% if page_obj.number > 4 %}
                            <li><span class="size-[40px] inline-flex justify-center items-center text-slate-400 bg-white dark:bg-slate-900 border border-gray-100 dark:border-gray-800 pointer-events-none">...</span></li>
                        {% endif %}
                    {% endif %}
                {% else %}
                    <li><span class="size-[40px] inline-flex justify-center items-center text-slate-400 bg-white dark:bg-slate-900 rounded-s-3xl border border-gray-100 dark:border-gray-800 pointer-events-none"><i class="uil uil-angle-left text-[20px] rtl:rotate-180 rtl:-mt-1"></i></span></li>
                {% endif %}

                {% for num in page_obj.paginator.page_range %}
                    {% if page_obj.number == num %}
                        <li><a href="{% modify_query page=num %}" aria-current="page" class="z-10 size-[40px] inline-flex justify-center items-center text-white bg-sky-600 border border-sky-600">{{ num }}</a></li>
                    {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                        <li><a href="{% modify_query page=num %}" class="size-[40px] inline-flex justify-center items-center text-slate-400 hover:text-white bg-white dark:bg-slate-900 border border-gray-100 dark:border-gray-800 hover:border-sky-600 dark:hover:border-sky-600 hover:bg-sky-600 dark:hover:bg-sky-600">{{ num }}</a></li>
                    {% endif %}
                {% endfor %}

                {% if page_obj.has_next %}
                    {% if page_obj.number < page_obj.paginator.num_pages|add:'-3' %}
                        <li><span class="size-[40px] inline-flex justify-center items-center text-slate-400 bg-white dark:bg-slate-900 border border-gray-100 dark:border-gray-800 pointer-events-none">...</span></li>
                        <li><a href="{% modify_query page=page_obj.paginator.num_pages %}" class="size-[40px] inline-flex justify-center items-center text-slate-400 hover:text-white bg-white dark:bg-slate-900 border border-gray-100 dark:border-gray-800 hover:border-sky-600 dark:hover:border-sky-600 hover:bg-sky-600 dark:hover:bg-sky-600">{{ page_obj.paginator.num_pages }}</a></li>
                    {% elif page_obj.number < page_obj.paginator.num_pages|add:'-2' %}
                        <li><a href="{% modify_query page=page_obj.paginator.num_pages %}" class="size-[40px] inline-flex justify-center items-center text-slate-400 hover:text-white bg-white dark:bg-slate-900 border border-gray-100 dark:border-gray-800 hover:border-sky-600 dark:hover:border-sky-600 hover:bg-sky-600 dark:hover:bg-sky-600">{{ page_obj.paginator.num_pages }}</a></li>
                    {% endif %}

                    <li><a href="{% modify_query page=page_obj.next_page_number %}" class="size-[40px] inline-flex justify-center items-center text-slate-400 bg-white dark:bg-slate-900 rounded-e-3xl hover:text-white border border-gray-100 dark:border-gray-800 hover:border-sky-600 dark:hover:border-sky-600 hover:bg-sky-600 dark:hover:bg-sky-600"><i class="uil uil-angle-right text-[20px] rtl:rotate-180 rtl:-mt-1"></i></a></li>
                {% else %}
                    <li><span class="size-[40px] inline-flex justify-center items-center text-slate-400 bg-white dark:bg-slate-900 rounded-e-3xl border border-gray-100 dark:border-gray-800 pointer-events-none"><i class="uil uil-angle-right text-[20px] rtl:rotate-180 rtl:-mt-1"></i></span></li>
                {% endif %}
            </ul>
        </nav>
    </div>
</div>