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-bordercolor dark:text-white rounded-md flex justify-center items-center text-dark 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"><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);">1</a></li>
<li class="page-item"><a class="page-link sm:w-10 sm:h-10 w-9 h-9 border border-bordercolor dark:text-white rounded-md flex justify-center items-center text-dark 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"><a class="page-link sm:w-10 sm:h-10 w-9 h-9 border border-bordercolor dark:text-white rounded-md flex justify-center items-center text-dark 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"><a class="page-link sm:w-10 sm:h-10 w-9 h-9 border border-bordercolor dark:text-white rounded-md flex justify-center items-center text-dark 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"><a class="page-link sm:w-10 sm:h-10 w-9 h-9 border border-bordercolor dark:text-white rounded-md flex justify-center items-center text-dark duration-500 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">
<li class="page-item"><a class="page-link w-7.5 h-7.5 border border-bordercolor dark:text-white rounded-md flex justify-center items-center text-dark 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"><a class="page-link w-7.5 h-7.5 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"><a class="page-link w-7.5 h-7.5 border border-bordercolor dark:text-white rounded-md flex justify-center items-center text-dark 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"><a class="page-link w-7.5 h-7.5 border border-bordercolor dark:text-white rounded-md flex justify-center items-center text-dark 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"><a class="page-link w-7.5 h-7.5 border border-bordercolor dark:text-white rounded-md flex justify-center items-center text-dark 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"><a class="page-link w-7.5 h-7.5 border border-bordercolor dark:text-white rounded-md flex justify-center items-center text-dark 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"><a class="page-link w-6 h-6 text-xs border border-bordercolor dark:text-white rounded-md flex justify-center items-center text-dark 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"><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"><a class="page-link w-6 h-6 text-xs border border-bordercolor dark:text-white rounded-md flex justify-center items-center text-dark duration-500 hover:bg-primary hover:text-white ml-[7px] 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-bordercolor dark:text-white rounded-md flex justify-center items-center text-dark duration-500 hover:bg-primary hover:text-white ml-[7px] 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-bordercolor dark:text-white rounded-md flex justify-center items-center text-dark duration-500 hover:bg-primary hover:text-white ml-[7px] 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-bordercolor dark:text-white rounded-md flex justify-center items-center text-dark 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 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-bordercolor dark:text-white rounded-md flex justify-center items-center text-dark 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 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);">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-bordercolor dark:text-white rounded-md flex justify-center items-center text-dark 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-bordercolor dark:text-white rounded-md flex justify-center items-center text-dark 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-bordercolor dark:text-white rounded-md flex justify-center items-center text-dark 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-bordercolor dark:text-white rounded-md flex justify-center items-center text-dark duration-500 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">
<li class="page-item mr-[0.4375rem]"><a class="page-link w-7.5 h-7.5 border border-bordercolor dark:text-white rounded-md flex justify-center items-center text-dark 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-7.5 h-7.5 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-7.5 h-7.5 border border-bordercolor dark:text-white rounded-md flex justify-center items-center text-dark 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-7.5 h-7.5 border border-bordercolor dark:text-white rounded-md flex justify-center items-center text-dark 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-7.5 h-7.5 border border-bordercolor dark:text-white rounded-md flex justify-center items-center text-dark 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-7.5 h-7.5 border border-bordercolor dark:text-white rounded-md flex justify-center items-center text-dark 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-bordercolor dark:text-white rounded-md flex justify-center items-center text-dark 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-bordercolor dark:text-white rounded-md flex justify-center items-center text-dark 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-bordercolor dark:text-white rounded-md flex justify-center items-center text-dark 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-bordercolor dark:text-white rounded-md flex justify-center items-center text-dark 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-bordercolor dark:text-white rounded-md flex justify-center items-center text-dark 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 dark:text-white border-primary/10 rounded-md flex justify-center items-center text-dark duration-500 bg-primary/10 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 dark:text-white border-transparent rounded-md flex justify-center items-center text-dark 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 dark:text-white 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 dark:text-white border-transparent rounded-md flex justify-center items-center text-dark 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 dark:text-white border-transparent rounded-md flex justify-center items-center text-dark 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 dark:text-white border-primary/10 rounded-md flex justify-center items-center text-dark duration-500 bg-primary/10 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 dark:text-white border border-danger/10 rounded-md flex justify-center items-center text-danger duration-500 bg-danger/10 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 dark:text-white border border-danger/10 rounded-md flex justify-center items-center text-danger duration-500 bg-danger/10 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 dark:text-white border border-danger/10 rounded-md flex justify-center items-center text-danger duration-500 bg-danger/10 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 dark:text-white border border-danger/10 rounded-md flex justify-center items-center text-danger duration-500 bg-danger/10 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 dark:text-white border border-danger/10 rounded-md flex justify-center items-center text-danger duration-500 bg-danger/10 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-7.5 h-7.5 dark:text-white border border-info/10 rounded-md flex justify-center items-center text-info duration-500 bg-info/10 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-7.5 h-7.5 dark:text-white 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-7.5 h-7.5 dark:text-white border border-info/10 rounded-md flex justify-center items-center text-info duration-500 bg-info/10 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-7.5 h-7.5 dark:text-white border border-info/10 rounded-md flex justify-center items-center text-info duration-500 bg-info/10 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-7.5 h-7.5 dark:text-white border border-info/10 rounded-md flex justify-center items-center text-info duration-500 bg-info/10 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-7.5 h-7.5 dark:text-white border border-info/10 rounded-md flex justify-center items-center text-info duration-500 bg-info/10 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 dark:text-white border border-warning/10 rounded-md flex justify-center items-center text-warning duration-500 bg-warning/10 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 dark:text-white 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 dark:text-white border border-warning/10 rounded-md flex justify-center items-center text-warning duration-500 bg-warning/10 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 dark:text-white border border-warning/10 rounded-md flex justify-center items-center text-warning duration-500 bg-warning/10 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 dark:text-white border border-warning/10 rounded-md flex justify-center items-center text-warning duration-500 bg-warning/10 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 dark:text-white border border-warning/10 rounded-md flex justify-center items-center text-warning duration-500 bg-warning/10 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/10 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-bordercolor dark:text-white rounded-full flex justify-center items-center text-dark 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-bordercolor dark:text-white rounded-full flex justify-center items-center text-dark 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-bordercolor dark:text-white rounded-full flex justify-center items-center text-dark 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/10 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-7.5 h-7.5 border border-primary rounded-full flex justify-center items-center text-primary duration-500 bg-primary/10 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-7.5 h-7.5 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-7.5 h-7.5 border border-bordercolor dark:text-white rounded-full flex justify-center items-center text-dark 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-7.5 h-7.5 border border-bordercolor dark:text-white rounded-full flex justify-center items-center text-dark 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-7.5 h-7.5 border border-bordercolor dark:text-white rounded-full flex justify-center items-center text-dark 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-7.5 h-7.5 border border-primary rounded-full flex justify-center items-center text-primary duration-500 bg-primary/10 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/10 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-bordercolor dark:text-white rounded-full flex justify-center items-center text-dark 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-bordercolor dark:text-white rounded-full flex justify-center items-center text-dark 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-bordercolor dark:text-white rounded-full flex justify-center items-center text-dark 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/10 hover:bg-primary hover:text-white ml-[7px]" href="javascript:void(0);"><i class="fa-solid fa-angle-right"></i></a></li>
</ul>
</nav>