Pagination
<nav>
<ul class="pagination flex mb-5">
<li class="page-item"><a class="page-link sm:w-10 sm:h-10 w-9 h-9 border border-[#E6E6E6] dark:border-[#ffffff1a] dark:text-white flex justify-center items-center text-body-color duration-500 hover:bg-primary hover:text-white text-base hover:border-primary rounded-s-md active" href="javascript:void(0);"><i class="fa-solid fa-angle-left"></i></a></li>
<li class="page-item"><a class="page-link sm:w-10 sm:h-10 w-9 h-9 border flex justify-center items-center duration-500 bg-primary text-white text-base border-primary" href="javascript:void(0);">1</a></li>
<li class="page-item"><a class="page-link sm:w-10 sm:h-10 w-9 h-9 border border-[#E6E6E6] dark:border-[#ffffff1a] dark:text-white flex justify-center items-center text-body-color duration-500 hover:bg-primary hover:text-white text-base hover:border-primary" href="javascript:void(0);">2</a></li>
<li class="page-item"><a class="page-link sm:w-10 sm:h-10 w-9 h-9 border border-[#E6E6E6] dark:border-[#ffffff1a] dark:text-white flex justify-center items-center text-body-color duration-500 hover:bg-primary hover:text-white text-base hover:border-primary" href="javascript:void(0);">3</a></li>
<li class="page-item"><a class="page-link sm:w-10 sm:h-10 w-9 h-9 border border-[#E6E6E6] dark:border-[#ffffff1a] dark:text-white flex justify-center items-center text-body-color duration-500 hover:bg-primary hover:text-white text-base hover:border-primary" href="javascript:void(0);">4</a></li>
<li class="page-item"><a class="page-link sm:w-10 sm:h-10 w-9 h-9 border border-[#E6E6E6] dark:border-[#ffffff1a] dark:text-white flex justify-center items-center text-body-color duration-500 hover:bg-primary hover:text-white text-base hover:border-primary rounded-e-md" href="javascript:void(0);"><i class="fa-solid fa-angle-right"></i></a></li>
</ul>
</nav>
<nav>
<ul class="pagination flex mb-5">
<li class="page-item"><a class="page-link w-[1.875rem] h-[1.875rem] border border-[#E6E6E6] dark:border-[#ffffff1a] dark:text-white flex justify-center items-center text-body-color duration-500 hover:bg-primary hover:text-white text-base hover:border-primary rounded-s-md active" href="javascript:void(0);"><i class="fa-solid fa-angle-left"></i></a></li>
<li class="page-item"><a class="page-link w-[1.875rem] h-[1.875rem] border flex justify-center items-center duration-500 bg-primary text-white text-base border-primary" href="javascript:void(0);">1</a></li>
<li class="page-item"><a class="page-link w-[1.875rem] h-[1.875rem] border border-[#E6E6E6] dark:border-[#ffffff1a] dark:text-white flex justify-center items-center text-body-color duration-500 hover:bg-primary hover:text-white text-base hover:border-primary" href="javascript:void(0);">2</a></li>
<li class="page-item"><a class="page-link w-[1.875rem] h-[1.875rem] border border-[#E6E6E6] dark:border-[#ffffff1a] dark:text-white flex justify-center items-center text-body-color duration-500 hover:bg-primary hover:text-white text-base hover:border-primary" href="javascript:void(0);">3</a></li>
<li class="page-item"><a class="page-link w-[1.875rem] h-[1.875rem] border border-[#E6E6E6] dark:border-[#ffffff1a] dark:text-white flex justify-center items-center text-body-color duration-500 hover:bg-primary hover:text-white text-base hover:border-primary" href="javascript:void(0);">4</a></li>
<li class="page-item"><a class="page-link w-[1.875rem] h-[1.875rem] border border-[#E6E6E6] dark:border-[#ffffff1a] dark:text-white flex justify-center items-center text-body-color duration-500 hover:bg-primary hover:text-white text-base hover:border-primary rounded-e-md" href="javascript:void(0);"><i class="fa-solid fa-angle-right"></i></a></li>
</ul>
</nav>
<nav>
<ul class="pagination flex mb-5">
<li class="page-item"><a class="page-link w-6 h-6 text-xs border border-[#E6E6E6] dark:border-[#ffffff1a] dark:text-white flex justify-center items-center text-body-color duration-500 hover:bg-primary hover:text-white hover:border-primary rounded-s-md active" href="javascript:void(0);"><i class="fa-solid fa-angle-left"></i></a></li>
<li class="page-item"><a class="page-link w-6 h-6 text-xs border flex justify-center items-center duration-500 bg-primary text-white border-primary" href="javascript:void(0);">1</a></li>
<li class="page-item"><a class="page-link w-6 h-6 text-xs border border-[#E6E6E6] dark:border-[#ffffff1a] dark:text-white flex justify-center items-center text-body-color duration-500 hover:bg-primary hover:text-white hover:border-primary" href="javascript:void(0);">2</a></li>
<li class="page-item"><a class="page-link w-6 h-6 text-xs border border-[#E6E6E6] dark:border-[#ffffff1a] dark:text-white flex justify-center items-center text-body-color duration-500 hover:bg-primary hover:text-white hover:border-primary" href="javascript:void(0);">3</a></li>
<li class="page-item"><a class="page-link w-6 h-6 text-xs border border-[#E6E6E6] dark:border-[#ffffff1a] dark:text-white flex justify-center items-center text-body-color duration-500 hover:bg-primary hover:text-white hover:border-primary" href="javascript:void(0);">4</a></li>
<li class="page-item"><a class="page-link w-6 h-6 text-xs border border-[#E6E6E6] dark:border-[#ffffff1a] dark:text-white flex justify-center items-center text-body-color duration-500 hover:bg-primary hover:text-white hover:border-primary rounded-e-md" href="javascript:void(0);"><i class="fa-solid fa-angle-right"></i></a></li>
</ul>
</nav>
Pagination Gutter
<nav>
<ul class="pagination flex mb-5">
<li class="page-item mr-[0.4375rem]"><a class="page-link sm:w-10 sm:h-10 w-9 h-9 border border-[#E6E6E6] dark:border-[#ffffff1a] dark:text-white rounded-md flex justify-center items-center text-body-color duration-500 hover:bg-primary hover:text-white text-base hover:border-primary active" href="javascript:void(0);"><i class="fa-solid fa-angle-left"></i></a></li>
<li class="page-item mr-[0.4375rem]"><a class="page-link sm:w-10 sm:h-10 w-9 h-9 border rounded-md flex justify-center items-center duration-500 bg-primary text-white text-base border-primary" href="javascript:void(0);">1</a></li>
<li class="page-item mr-[0.4375rem]"><a class="page-link sm:w-10 sm:h-10 w-9 h-9 border border-[#E6E6E6] dark:border-[#ffffff1a] dark:text-white rounded-md flex justify-center items-center text-body-color duration-500 hover:bg-primary hover:text-white text-base hover:border-primary" href="javascript:void(0);">2</a></li>
<li class="page-item mr-[0.4375rem]"><a class="page-link sm:w-10 sm:h-10 w-9 h-9 border border-[#E6E6E6] dark:border-[#ffffff1a] dark:text-white rounded-md flex justify-center items-center text-body-color duration-500 hover:bg-primary hover:text-white text-base hover:border-primary" href="javascript:void(0);">3</a></li>
<li class="page-item mr-[0.4375rem]"><a class="page-link sm:w-10 sm:h-10 w-9 h-9 border border-[#E6E6E6] dark:border-[#ffffff1a] dark:text-white rounded-md flex justify-center items-center text-body-color duration-500 hover:bg-primary hover:text-white text-base hover:border-primary" href="javascript:void(0);">4</a></li>
<li class="page-item mr-[0.4375rem]"><a class="page-link sm:w-10 sm:h-10 w-9 h-9 border border-[#E6E6E6] dark:border-[#ffffff1a] dark:text-white rounded-md flex justify-center items-center text-body-color duration-500 hover:bg-primary hover:text-white text-base hover:border-primary" href="javascript:void(0);"><i class="fa-solid fa-angle-right"></i></a></li>
</ul>
</nav>
<nav>
<ul class="pagination flex mb-5">
<li class="page-item mr-[0.4375rem]"><a class="page-link w-[1.875rem] h-[1.875rem] border border-[#E6E6E6] dark:border-[#ffffff1a] dark:text-white rounded-md flex justify-center items-center text-body-color duration-500 hover:bg-primary hover:text-white ml-[7px] text-base hover:border-primary active" href="javascript:void(0);"><i class="fa-solid fa-angle-left"></i></a></li>
<li class="page-item mr-[0.4375rem]"><a class="page-link w-[1.875rem] h-[1.875rem] border rounded-md flex justify-center items-center duration-500 bg-primary text-white ml-[7px] text-base border-primary" href="javascript:void(0);">1</a></li>
<li class="page-item mr-[0.4375rem]"><a class="page-link w-[1.875rem] h-[1.875rem] border border-[#E6E6E6] dark:border-[#ffffff1a] dark:text-white rounded-md flex justify-center items-center text-body-color duration-500 hover:bg-primary hover:text-white ml-[7px] text-base hover:border-primary" href="javascript:void(0);">2</a></li>
<li class="page-item mr-[0.4375rem]"><a class="page-link w-[1.875rem] h-[1.875rem] border border-[#E6E6E6] dark:border-[#ffffff1a] dark:text-white rounded-md flex justify-center items-center text-body-color duration-500 hover:bg-primary hover:text-white ml-[7px] text-base hover:border-primary" href="javascript:void(0);">3</a></li>
<li class="page-item mr-[0.4375rem]"><a class="page-link w-[1.875rem] h-[1.875rem] border border-[#E6E6E6] dark:border-[#ffffff1a] dark:text-white rounded-md flex justify-center items-center text-body-color duration-500 hover:bg-primary hover:text-white ml-[7px] text-base hover:border-primary" href="javascript:void(0);">4</a></li>
<li class="page-item mr-[0.4375rem]"><a class="page-link w-[1.875rem] h-[1.875rem] border border-[#E6E6E6] dark:border-[#ffffff1a] dark:text-white rounded-md flex justify-center items-center text-body-color duration-500 hover:bg-primary hover:text-white ml-[7px] text-base hover:border-primary" href="javascript:void(0);"><i class="fa-solid fa-angle-right"></i></a></li>
</ul>
</nav>
<nav>
<ul class="pagination flex mb-5">
<li class="page-item mr-[0.4375rem]"><a class="page-link w-6 h-6 text-xs border border-[#E6E6E6] dark:border-[#ffffff1a] dark:text-white rounded-md flex justify-center items-center text-body-color duration-500 hover:bg-primary hover:text-white ml-[7px] hover:border-primary active" href="javascript:void(0);"><i class="fa-solid fa-angle-left"></i></a></li>
<li class="page-item mr-[0.4375rem]"><a class="page-link w-6 h-6 text-xs border rounded-md flex justify-center items-center duration-500 bg-primary text-white ml-[7px] border-primary" href="javascript:void(0);">1</a></li>
<li class="page-item mr-[0.4375rem]"><a class="page-link w-6 h-6 text-xs border border-[#E6E6E6] dark:border-[#ffffff1a] dark:text-white rounded-md flex justify-center items-center text-body-color duration-500 hover:bg-primary hover:text-white ml-[7px] hover:border-primary" href="javascript:void(0);">2</a></li>
<li class="page-item mr-[0.4375rem]"><a class="page-link w-6 h-6 text-xs border border-[#E6E6E6] dark:border-[#ffffff1a] dark:text-white rounded-md flex justify-center items-center text-body-color duration-500 hover:bg-primary hover:text-white ml-[7px] hover:border-primary" href="javascript:void(0);">3</a></li>
<li class="page-item mr-[0.4375rem]"><a class="page-link w-6 h-6 text-xs border border-[#E6E6E6] dark:border-[#ffffff1a] dark:text-white rounded-md flex justify-center items-center text-body-color duration-500 hover:bg-primary hover:text-white ml-[7px] hover:border-primary" href="javascript:void(0);">4</a></li>
<li class="page-item mr-[0.4375rem]"><a class="page-link w-6 h-6 text-xs border border-[#E6E6E6] dark:border-[#ffffff1a] dark:text-white rounded-md flex justify-center items-center text-body-color duration-500 hover:bg-primary hover:text-white ml-[7px] hover:border-primary" href="javascript:void(0);"><i class="fa-solid fa-angle-right"></i></a></li>
</ul>
</nav>
Pagination Color
<nav>
<ul class="pagination flex mb-5 pagination-gutter pagination-primary no-bg">
<li class="page-item mr-[0.4375rem]"><a class="page-link sm:w-10 sm:h-10 w-9 h-9 border border-primary-light rounded-md flex justify-center items-center text-primary duration-500 bg-primary-light hover:bg-primary hover:text-white ml-[7px] text-base hover:border-primary active" href="javascript:void(0);"><i class="fa-solid fa-angle-left"></i></a></li>
<li class="page-item mr-[0.4375rem]"><a class="page-link sm:w-10 sm:h-10 w-9 h-9 border border-transparent rounded-md flex justify-center items-center text-primary duration-500 hover:bg-primary hover:text-white ml-[7px] text-base hover:border-primary" href="javascript:void(0);">1</a></li>
<li class="page-item mr-[0.4375rem]"><a class="page-link sm:w-10 sm:h-10 w-9 h-9 border rounded-md flex justify-center items-center duration-500 bg-primary text-white ml-[7px] text-base border-primary" href="javascript:void(0);">2</a></li>
<li class="page-item mr-[0.4375rem]"><a class="page-link sm:w-10 sm:h-10 w-9 h-9 border border-transparent rounded-md flex justify-center items-center text-primary duration-500 hover:bg-primary hover:text-white ml-[7px] text-base hover:border-primary" href="javascript:void(0);">3</a></li>
<li class="page-item mr-[0.4375rem]"><a class="page-link sm:w-10 sm:h-10 w-9 h-9 border border-transparent rounded-md flex justify-center items-center text-primary duration-500 hover:bg-primary hover:text-white ml-[7px] text-base hover:border-primary" href="javascript:void(0);">4</a></li>
<li class="page-item mr-[0.4375rem]"><a class="page-link sm:w-10 sm:h-10 w-9 h-9 border border-primary-light rounded-md flex justify-center items-center text-primary duration-500 bg-primary-light hover:bg-primary hover:text-white text-base ml-[7px] hover:border-primary" href="javascript:void(0);"><i class="fa-solid fa-angle-right"></i></a></li>
</ul>
</nav>
<nav>
<ul class="pagination flex mb-5 pagination-gutter pagination-danger">
<li class="page-item mr-[0.4375rem]"><a class="page-link sm:w-10 sm:h-10 w-9 h-9 border border-danger-light rounded-md flex justify-center items-center text-danger duration-500 bg-danger-light hover:bg-danger hover:text-white ml-[7px] text-base hover:border-danger active" href="javascript:void(0);"><i class="fa-solid fa-angle-left"></i></a></li>
<li class="page-item mr-[0.4375rem]"><a class="page-link sm:w-10 sm:h-10 w-9 h-9 border rounded-md flex justify-center items-center duration-500 bg-danger text-white ml-[7px] text-base border-danger" href="javascript:void(0);">1</a></li>
<li class="page-item mr-[0.4375rem]"><a class="page-link sm:w-10 sm:h-10 w-9 h-9 border border-danger-light rounded-md flex justify-center items-center text-danger duration-500 bg-danger-light hover:bg-danger hover:text-white ml-[7px] text-base hover:border-danger" href="javascript:void(0);">2</a></li>
<li class="page-item mr-[0.4375rem]"><a class="page-link sm:w-10 sm:h-10 w-9 h-9 border border-danger-light rounded-md flex justify-center items-center text-danger duration-500 bg-danger-light hover:bg-danger hover:text-white ml-[7px] text-base hover:border-danger" href="javascript:void(0);">3</a></li>
<li class="page-item mr-[0.4375rem]"><a class="page-link sm:w-10 sm:h-10 w-9 h-9 border border-danger-light rounded-md flex justify-center items-center text-danger duration-500 bg-danger-light hover:bg-danger hover:text-white ml-[7px] text-base hover:border-danger" href="javascript:void(0);">4</a></li>
<li class="page-item mr-[0.4375rem]"><a class="page-link sm:w-10 sm:h-10 w-9 h-9 border border-danger-light rounded-md flex justify-center items-center text-danger duration-500 bg-danger-light hover:bg-danger hover:text-white text-base ml-[7px] hover:border-danger" href="javascript:void(0);"><i class="fa-solid fa-angle-right"></i></a></li>
</ul>
</nav>
<nav>
<ul class="pagination flex mb-5 pagination-sm pagination-gutter pagination-info">
<li class="page-item page-indicator mr-[0.4375rem]">
<a class="page-link w-[1.875rem] h-[1.875rem] border border-info-light rounded-md flex justify-center items-center text-info duration-500 bg-info-light hover:bg-info hover:text-white ml-[7px] text-base hover:border-info" href="javascript:void(0);"><i class="fa-solid fa-angle-left"></i></a>
</li>
<li class="page-item active"><a class="page-link w-[1.875rem] h-[1.875rem] border border-info rounded-md flex justify-center items-center text-white duration-500 bg-info hover:bg-info-hover ml-[7px] text-base" href="javascript:void(0)">1</a>
</li>
<li class="page-item mr-[0.4375rem]"><a class="page-link w-[1.875rem] h-[1.875rem] border border-info-light rounded-md flex justify-center items-center text-info duration-500 bg-info-light hover:bg-info hover:text-white ml-[7px] text-base hover:border-info" href="javascript:void(0)">2</a></li>
<li class="page-item mr-[0.4375rem]"><a class="page-link w-[1.875rem] h-[1.875rem] border border-info-light rounded-md flex justify-center items-center text-info duration-500 bg-info-light hover:bg-info hover:text-white ml-[7px] text-base hover:border-info" href="javascript:void(0)">3</a></li>
<li class="page-item mr-[0.4375rem]"><a class="page-link w-[1.875rem] h-[1.875rem] border border-info-light rounded-md flex justify-center items-center text-info duration-500 bg-info-light hover:bg-info hover:text-white ml-[7px] text-base hover:border-info" href="javascript:void(0)">4</a></li>
<li class="page-item page-indicator mr-[0.4375rem]">
<a class="page-link w-[1.875rem] h-[1.875rem] border border-info-light rounded-md flex justify-center items-center text-info duration-500 bg-info-light hover:bg-info hover:text-white ml-[7px] text-base hover:border-info" href="javascript:void(0);"><i class="fa-solid fa-angle-right"></i></a>
</li>
</ul>
</nav>
<nav>
<ul class="pagination flex mb-5 pagination-xs pagination-gutter pagination-warning">
<li class="page-item page-indicator mr-[0.4375rem]">
<a class="page-link w-6 h-6 text-xs border border-warning-light rounded-md flex justify-center items-center text-warning duration-500 bg-warning-light hover:bg-warning hover:text-white ml-[7px] hover:border-warning" href="javascript:void(0);"><i class="fa-solid fa-angle-left"></i></a>
</li>
<li class="page-item active"><a class="page-link w-6 h-6 text-xs border border-warning rounded-md flex justify-center items-center text-white duration-500 bg-warning ml-[7px]" href="javascript:void(0)">1</a>
</li>
<li class="page-item mr-[0.4375rem]"><a class="page-link w-6 h-6 text-xs border border-warning-light rounded-md flex justify-center items-center text-warning duration-500 bg-warning-light hover:bg-warning hover:text-white ml-[7px] hover:border-warning" href="javascript:void(0)">2</a></li>
<li class="page-item mr-[0.4375rem]"><a class="page-link w-6 h-6 text-xs border border-warning-light rounded-md flex justify-center items-center text-warning duration-500 bg-warning-light hover:bg-warning hover:text-white ml-[7px] hover:border-warning" href="javascript:void(0)">3</a></li>
<li class="page-item mr-[0.4375rem]"><a class="page-link w-6 h-6 text-xs border border-warning-light rounded-md flex justify-center items-center text-warning duration-500 bg-warning-light hover:bg-warning hover:text-white ml-[7px] hover:border-warning" href="javascript:void(0)">4</a></li>
<li class="page-item page-indicator mr-[0.4375rem]">
<a class="page-link w-6 h-6 text-xs border border-warning-light rounded-md flex justify-center items-center text-warning duration-500 bg-warning-light hover:bg-warning hover:text-white ml-[7px] hover:border-warning" href="javascript:void(0);"><i class="fa-solid fa-angle-right"></i></a>
</li>
</ul>
</nav>
Pagination Circle
<nav>
<ul class="pagination flex mb-5">
<li class="page-item mr-[0.4375rem]"><a class="page-link sm:w-10 sm:h-10 w-9 h-9 border border-primary rounded-full flex justify-center items-center text-primary duration-500 bg-primary-light hover:bg-primary hover:text-white ml-[7px] text-base active" href="javascript:void(0);"><i class="fa-solid fa-angle-left"></i></a></li>
<li class="page-item mr-[0.4375rem]"><a class="page-link sm:w-10 sm:h-10 w-9 h-9 border rounded-full flex justify-center items-center duration-500 bg-primary text-white ml-[7px] text-base border-primary" href="javascript:void(0);">1</a></li>
<li class="page-item mr-[0.4375rem]"><a class="page-link sm:w-10 sm:h-10 w-9 h-9 border border-[#E6E6E6] dark:border-[#ffffff1a] rounded-full flex justify-center items-center text-body-color duration-500 hover:bg-primary hover:text-white ml-[7px] text-base hover:border-primary" href="javascript:void(0);">2</a></li>
<li class="page-item mr-[0.4375rem]"><a class="page-link sm:w-10 sm:h-10 w-9 h-9 border border-[#E6E6E6] dark:border-[#ffffff1a] rounded-full flex justify-center items-center text-body-color duration-500 hover:bg-primary hover:text-white ml-[7px] text-base hover:border-primary" href="javascript:void(0);">3</a></li>
<li class="page-item mr-[0.4375rem]"><a class="page-link sm:w-10 sm:h-10 w-9 h-9 border border-[#E6E6E6] dark:border-[#ffffff1a] rounded-full flex justify-center items-center text-body-color duration-500 hover:bg-primary hover:text-white ml-[7px] text-base hover:border-primary" href="javascript:void(0);">4</a></li>
<li class="page-item mr-[0.4375rem]"><a class="page-link sm:w-10 sm:h-10 w-9 h-9 border border-primary rounded-full flex justify-center items-center text-primary duration-500 bg-primary-light hover:bg-primary hover:text-white ml-[7px] text-base" href="javascript:void(0);"><i class="fa-solid fa-angle-right"></i></a></li>
</ul>
</nav>
<nav>
<ul class="pagination flex mb-5">
<li class="page-item mr-[0.4375rem]"><a class="page-link w-[1.875rem] h-[1.875rem] border border-primary rounded-full flex justify-center items-center text-primary duration-500 bg-primary-light hover:bg-primary hover:text-white ml-[7px] text-base active" href="javascript:void(0);"><i class="fa-solid fa-angle-left"></i></a></li>
<li class="page-item mr-[0.4375rem]"><a class="page-link w-[1.875rem] h-[1.875rem] border rounded-full flex justify-center items-center duration-500 bg-primary text-white ml-[7px] text-base border-primary" href="javascript:void(0);">1</a></li>
<li class="page-item mr-[0.4375rem]"><a class="page-link w-[1.875rem] h-[1.875rem] border border-[#E6E6E6] dark:border-[#ffffff1a] rounded-full flex justify-center items-center text-body-color duration-500 hover:bg-primary hover:text-white ml-[7px] text-base hover:border-primary" href="javascript:void(0);">2</a></li>
<li class="page-item mr-[0.4375rem]"><a class="page-link w-[1.875rem] h-[1.875rem] border border-[#E6E6E6] dark:border-[#ffffff1a] rounded-full flex justify-center items-center text-body-color duration-500 hover:bg-primary hover:text-white ml-[7px] text-base hover:border-primary" href="javascript:void(0);">3</a></li>
<li class="page-item mr-[0.4375rem]"><a class="page-link w-[1.875rem] h-[1.875rem] border border-[#E6E6E6] dark:border-[#ffffff1a] rounded-full flex justify-center items-center text-body-color duration-500 hover:bg-primary hover:text-white ml-[7px] text-base hover:border-primary" href="javascript:void(0);">4</a></li>
<li class="page-item mr-[0.4375rem]"><a class="page-link w-[1.875rem] h-[1.875rem] border border-primary rounded-full flex justify-center items-center text-primary duration-500 bg-primary-light hover:bg-primary hover:text-white ml-[7px] text-base" href="javascript:void(0);"><i class="fa-solid fa-angle-right"></i></a></li>
</ul>
</nav>
<nav>
<ul class="pagination flex mb-5">
<li class="page-item mr-[0.4375rem]"><a class="page-link w-6 h-6 text-xs border border-primary rounded-full flex justify-center items-center text-primary duration-500 bg-primary-light hover:bg-primary hover:text-white ml-[7px] active" href="javascript:void(0);"><i class="fa-solid fa-angle-left"></i></a></li>
<li class="page-item mr-[0.4375rem]"><a class="page-link w-6 h-6 text-xs border rounded-full flex justify-center items-center duration-500 bg-primary text-white ml-[7px] border-primary" href="javascript:void(0);">1</a></li>
<li class="page-item mr-[0.4375rem]"><a class="page-link w-6 h-6 text-xs border border-[#E6E6E6] dark:border-[#ffffff1a] rounded-full flex justify-center items-center text-body-color duration-500 hover:bg-primary hover:text-white ml-[7px] hover:border-primary" href="javascript:void(0);">2</a></li>
<li class="page-item mr-[0.4375rem]"><a class="page-link w-6 h-6 text-xs border border-[#E6E6E6] dark:border-[#ffffff1a] rounded-full flex justify-center items-center text-body-color duration-500 hover:bg-primary hover:text-white ml-[7px] hover:border-primary" href="javascript:void(0);">3</a></li>
<li class="page-item mr-[0.4375rem]"><a class="page-link w-6 h-6 text-xs border border-[#E6E6E6] dark:border-[#ffffff1a] rounded-full flex justify-center items-center text-body-color duration-500 hover:bg-primary hover:text-white ml-[7px] hover:border-primary" href="javascript:void(0);">4</a></li>
<li class="page-item mr-[0.4375rem]"><a class="page-link w-6 h-6 text-xs border border-primary rounded-full flex justify-center items-center text-primary duration-500 bg-primary-light hover:bg-primary hover:text-white ml-[7px]" href="javascript:void(0);"><i class="fa-solid fa-angle-right"></i></a></li>
</ul>
</nav>