Pagination.
Make use of Tailwind's unique Pagination styles to enhance actions in forms, dialogs, and various other elements, featuring comprehensive support for multiple sizes, states, and additional functionalities.
PaginationPagination
Pagination
Default pagination style
<nav>
<ul class="flex mb-5 sm:text-base">
<li class="page-item page-indicator">
<a class="size-10 leading-10 text-center border border-bordercolor rounded-xl block duration-500 hover:bg-primary hover:text-white hover:border-primary dark:text-white ml-1.75" href="javascript:void(0);"><i class="la la-angle-left"></i></a>
</li>
<li class="page-item active">
<a class="size-10 leading-10 text-center border rounded-xl block duration-500 bg-primary text-white border-primary ml-1.75" href="javascript:void(0);">1</a>
</li>
<li class="page-item">
<a class="size-10 leading-10 text-center border border-bordercolor rounded-xl block duration-500 hover:bg-primary hover:text-white hover:border-primary dark:text-white ml-1.75" href="javascript:void(0);">2</a></li>
<li class="page-item">
<a class="size-10 leading-10 text-center border border-bordercolor rounded-xl block duration-500 hover:bg-primary hover:text-white hover:border-primary dark:text-white ml-1.75" href="javascript:void(0);">3</a></li>
<li class="page-item">
<a class="size-10 leading-10 text-center border border-bordercolor rounded-xl block duration-500 hover:bg-primary hover:text-white hover:border-primary dark:text-white ml-1.75" href="javascript:void(0);">4</a></li>
<li class="page-item page-indicator">
<a class="size-10 leading-10 text-center border border-bordercolor rounded-xl block duration-500 hover:bg-primary hover:text-white hover:border-primary dark:text-white ml-1.75" href="javascript:void(0);"><i class="la la-angle-right"></i></a>
</li>
</ul>
</nav>
<nav>
<ul class="flex mb-5 sm:text-base">
<li class="page-item page-indicator">
<a class="size-7.5 leading-7.5 text-center border border-bordercolor rounded-xl block duration-500 hover:bg-primary hover:text-white hover:border-primary dark:text-white ml-1.75" href="javascript:void(0);"><i class="la la-angle-left"></i></a>
</li>
<li class="page-item active">
<a class="size-7.5 leading-7.5 text-center border rounded-xl block duration-500 bg-primary text-white border-primary ml-1.75" href="javascript:void(0);">1</a>
</li>
<li class="page-item">
<a class="size-7.5 leading-7.5 text-center border border-bordercolor rounded-xl block duration-500 hover:bg-primary hover:text-white hover:border-primary dark:text-white ml-1.75" href="javascript:void(0);">2</a></li>
<li class="page-item">
<a class="size-7.5 leading-7.5 text-center border border-bordercolor rounded-xl block duration-500 hover:bg-primary hover:text-white hover:border-primary dark:text-white ml-1.75" href="javascript:void(0);">3</a></li>
<li class="page-item">
<a class="size-7.5 leading-7.5 text-center border border-bordercolor rounded-xl block duration-500 hover:bg-primary hover:text-white hover:border-primary dark:text-white ml-1.75" href="javascript:void(0);">4</a></li>
<li class="page-item page-indicator">
<a class="size-7.5 leading-7.5 text-center border border-bordercolor rounded-xl block duration-500 hover:bg-primary hover:text-white hover:border-primary dark:text-white ml-1.75" href="javascript:void(0);"><i class="la la-angle-right"></i></a>
</li>
</ul>
</nav>
<nav>
<ul class="flex mb-5 text-xs">
<li class="page-item page-indicator">
<a class="size-6 leading-6 text-center border border-bordercolor rounded-xl block duration-500 hover:bg-primary hover:text-white hover:border-primary dark:text-white ml-1.75" href="javascript:void(0);"><i class="la la-angle-left"></i></a>
</li>
<li class="page-item active">
<a class="size-6 leading-6 text-center border rounded-xl block duration-500 bg-primary text-white border-primary ml-1.75" href="javascript:void(0);">1</a>
</li>
<li class="page-item">
<a class="size-6 leading-6 text-center border border-bordercolor rounded-xl block duration-500 hover:bg-primary hover:text-white hover:border-primary dark:text-white ml-1.75" href="javascript:void(0);">2</a></li>
<li class="page-item">
<a class="size-6 leading-6 text-center border border-bordercolor rounded-xl block duration-500 hover:bg-primary hover:text-white hover:border-primary dark:text-white ml-1.75" href="javascript:void(0);">3</a></li>
<li class="page-item">
<a class="size-6 leading-6 text-center border border-bordercolor rounded-xl block duration-500 hover:bg-primary hover:text-white hover:border-primary dark:text-white ml-1.75" href="javascript:void(0);">4</a></li>
<li class="page-item page-indicator">
<a class="size-6 leading-6 text-center border border-bordercolor rounded-xl block duration-500 hover:bg-primary hover:text-white hover:border-primary dark:text-white ml-1.75" href="javascript:void(0);"><i class="la la-angle-right"></i></a>
</li>
</ul>
</nav>
Pagination Gutter
<nav>
<ul class="flex mb-5 sm:text-base">
<li class="sm:mr-1.75 page-indicator">
<a class="size-10 leading-10 text-center border border-bordercolor rounded-xl block duration-500 hover:bg-primary hover:text-white hover:border-primary dark:text-white ml-1.75" href="javascript:void(0);"><i class="la la-angle-left"></i></a>
</li>
<li class="sm:mr-1.75 active">
<a class="size-10 leading-10 text-center border rounded-xl block duration-500 bg-primary text-white border-primary ml-1.75" href="javascript:void(0);">1</a>
</li>
<li class="sm:mr-1.75">
<a class="size-10 leading-10 text-center border border-bordercolor rounded-xl block duration-500 hover:bg-primary hover:text-white hover:border-primary dark:text-white ml-1.75" href="javascript:void(0);">2</a></li>
<li class="sm:mr-1.75">
<a class="size-10 leading-10 text-center border border-bordercolor rounded-xl block duration-500 hover:bg-primary hover:text-white hover:border-primary dark:text-white ml-1.75" href="javascript:void(0);">3</a></li>
<li class="sm:mr-1.75">
<a class="size-10 leading-10 text-center border border-bordercolor rounded-xl block duration-500 hover:bg-primary hover:text-white hover:border-primary dark:text-white ml-1.75" href="javascript:void(0);">4</a></li>
<li class="sm:mr-1.75 page-indicator">
<a class="size-10 leading-10 text-center border border-bordercolor rounded-xl block duration-500 hover:bg-primary hover:text-white hover:border-primary dark:text-white ml-1.75" href="javascript:void(0);"><i class="la la-angle-right"></i></a>
</li>
</ul>
</nav>
<nav>
<ul class="flex mb-5 sm:text-base">
<li class="sm:mr-1.75 page-indicator">
<a class="size-7.5 leading-7.5 text-center border border-bordercolor rounded-xl block duration-500 hover:bg-primary hover:text-white hover:border-primary dark:text-white ml-1.75" href="javascript:void(0);"><i class="la la-angle-left"></i></a>
</li>
<li class="sm:mr-1.75 active">
<a class="size-7.5 leading-7.5 text-center border rounded-xl block duration-500 bg-primary text-white border-primary ml-1.75" href="javascript:void(0);">1</a>
</li>
<li class="sm:mr-1.75">
<a class="size-7.5 leading-7.5 text-center border border-bordercolor rounded-xl block duration-500 hover:bg-primary hover:text-white hover:border-primary dark:text-white ml-1.75" href="javascript:void(0);">2</a></li>
<li class="sm:mr-1.75">
<a class="size-7.5 leading-7.5 text-center border border-bordercolor rounded-xl block duration-500 hover:bg-primary hover:text-white hover:border-primary dark:text-white ml-1.75" href="javascript:void(0);">3</a></li>
<li class="sm:mr-1.75">
<a class="size-7.5 leading-7.5 text-center border border-bordercolor rounded-xl block duration-500 hover:bg-primary hover:text-white hover:border-primary dark:text-white ml-1.75" href="javascript:void(0);">4</a></li>
<li class="sm:mr-1.75 page-indicator">
<a class="size-7.5 leading-7.5 text-center border border-bordercolor rounded-xl block duration-500 hover:bg-primary hover:text-white hover:border-primary dark:text-white ml-1.75" href="javascript:void(0);"><i class="la la-angle-right"></i></a>
</li>
</ul>
</nav>
<nav>
<ul class="flex mb-5 text-xs">
<li class="sm:mr-1.75 page-indicator">
<a class="size-6 leading-6 text-center border border-bordercolor rounded-xl block duration-500 hover:bg-primary hover:text-white hover:border-primary dark:text-white ml-1.75" href="javascript:void(0);"><i class="la la-angle-left"></i></a>
</li>
<li class="sm:mr-1.75 active">
<a class="size-6 leading-6 text-center border rounded-xl block duration-500 bg-primary text-white border-primary ml-1.75" href="javascript:void(0);">1</a>
</li>
<li class="sm:mr-1.75">
<a class="size-6 leading-6 text-center border border-bordercolor rounded-xl block duration-500 hover:bg-primary hover:text-white hover:border-primary dark:text-white ml-1.75" href="javascript:void(0);">2</a></li>
<li class="sm:mr-1.75">
<a class="size-6 leading-6 text-center border border-bordercolor rounded-xl block duration-500 hover:bg-primary hover:text-white hover:border-primary dark:text-white ml-1.75" href="javascript:void(0);">3</a></li>
<li class="sm:mr-1.75">
<a class="size-6 leading-6 text-center border border-bordercolor rounded-xl block duration-500 hover:bg-primary hover:text-white hover:border-primary dark:text-white ml-1.75" href="javascript:void(0);">4</a></li>
<li class="sm:mr-1.75 page-indicator">
<a class="size-6 leading-6 text-center border border-bordercolor rounded-xl block duration-500 hover:bg-primary hover:text-white hover:border-primary dark:text-white ml-1.75" href="javascript:void(0);"><i class="la la-angle-right"></i></a>
</li>
</ul>
</nav>
Pagination Color
<nav>
<ul class="flex mb-5 sm:text-base">
<li class="sm:mr-1.75 page-indicator">
<a class="size-10 leading-10 text-center border border-primary/10 rounded-xl block bg-primary/10 duration-500 hover:bg-primary hover:text-white hover:border-primary dark:text-white ml-1.75" href="javascript:void(0);"><i class="la la-angle-left"></i></a>
</li>
<li class="sm:mr-1.75">
<a class="size-10 leading-10 text-center border border-transparent rounded-xl block duration-500 hover:bg-primary hover:text-white hover:border-primary dark:text-white ml-1.75" href="javascript:void(0);">1</a></li>
<li class="sm:mr-1.75 active">
<a class="size-10 leading-10 text-center border rounded-xl block duration-500 bg-primary text-white border-primary ml-1.75" href="javascript:void(0);">2</a>
</li>
<li class="sm:mr-1.75">
<a class="size-10 leading-10 text-center border border-transparent rounded-xl block duration-500 hover:bg-primary hover:text-white hover:border-primary dark:text-white ml-1.75" href="javascript:void(0);">3</a></li>
<li class="sm:mr-1.75">
<a class="size-10 leading-10 text-center border border-transparent rounded-xl block duration-500 hover:bg-primary hover:text-white hover:border-primary dark:text-white ml-1.75" href="javascript:void(0);">4</a></li>
<li class="sm:mr-1.75 page-indicator">
<a class="size-10 leading-10 text-center border border-primary/10 rounded-xl block bg-primary/10 duration-500 hover:bg-primary hover:text-white hover:border-primary dark:text-white ml-1.75" href="javascript:void(0);"><i class="la la-angle-right"></i></a>
</li>
</ul>
</nav>
<nav>
<ul class="flex mb-5 sm:text-base">
<li class="sm:mr-1.75 page-indicator">
<a class="size-10 leading-10 text-center border border-danger/10 rounded-xl block bg-danger/10 duration-500 hover:bg-danger hover:text-white hover:border-danger text-danger ml-1.75" href="javascript:void(0);"><i class="la la-angle-left"></i></a>
</li>
<li class="sm:mr-1.75">
<a class="size-10 leading-10 text-center border border-danger/10 rounded-xl block bg-danger/10 duration-500 hover:bg-danger hover:text-white hover:border-danger text-danger ml-1.75" href="javascript:void(0);">1</a></li>
<li class="sm:mr-1.75 active">
<a class="size-10 leading-10 text-center border rounded-xl block duration-500 bg-danger text-white border-danger ml-1.75" href="javascript:void(0);">2</a>
</li>
<li class="sm:mr-1.75">
<a class="size-10 leading-10 text-center border border-danger/10 rounded-xl block bg-danger/10 duration-500 hover:bg-danger hover:text-white hover:border-danger text-danger ml-1.75" href="javascript:void(0);">3</a></li>
<li class="sm:mr-1.75">
<a class="size-10 leading-10 text-center border border-danger/10 rounded-xl block bg-danger/10 duration-500 hover:bg-danger hover:text-white hover:border-danger text-danger ml-1.75" href="javascript:void(0);">4</a></li>
<li class="sm:mr-1.75 page-indicator">
<a class="size-10 leading-10 text-center border border-danger/10 rounded-xl block bg-danger/10 duration-500 hover:bg-danger hover:text-white hover:border-danger text-danger ml-1.75" href="javascript:void(0);"><i class="la la-angle-right"></i></a>
</li>
</ul>
</nav>
<nav>
<ul class="flex mb-5 sm:text-base">
<li class="sm:mr-1.75 page-indicator">
<a class="size-7.5 leading-7.5 text-center border border-info/10 rounded-xl block bg-info/10 duration-500 hover:bg-info hover:text-white hover:border-info text-info ml-1.75" href="javascript:void(0);"><i class="la la-angle-left"></i></a>
</li>
<li class="sm:mr-1.75">
<a class="size-7.5 leading-7.5 text-center border border-info/10 rounded-xl block bg-info/10 duration-500 hover:bg-info hover:text-white hover:border-info text-info ml-1.75" href="javascript:void(0);">1</a></li>
<li class="sm:mr-1.75 active">
<a class="size-7.5 leading-7.5 text-center border rounded-xl block duration-500 bg-info text-white border-info ml-1.75" href="javascript:void(0);">2</a>
</li>
<li class="sm:mr-1.75">
<a class="size-7.5 leading-7.5 text-center border border-info/10 rounded-xl block bg-info/10 duration-500 hover:bg-info hover:text-white hover:border-info text-info ml-1.75" href="javascript:void(0);">3</a></li>
<li class="sm:mr-1.75">
<a class="size-7.5 leading-7.5 text-center border border-info/10 rounded-xl block bg-info/10 duration-500 hover:bg-info hover:text-white hover:border-info text-info ml-1.75" href="javascript:void(0);">4</a></li>
<li class="sm:mr-1.75 page-indicator">
<a class="size-7.5 leading-7.5 text-center border border-info/10 rounded-xl block bg-info/10 duration-500 hover:bg-info hover:text-white hover:border-info text-info ml-1.75" href="javascript:void(0);"><i class="la la-angle-right"></i></a>
</li>
</ul>
</nav>
<nav>
<ul class="flex mb-5 text-xs">
<li class="sm:mr-1.75 page-indicator">
<a class="size-6 leading-6 text-center border border-warning/10 rounded-xl block bg-warning/10 duration-500 hover:bg-warning hover:text-white hover:border-warning text-warning ml-1.75" href="javascript:void(0);"><i class="la la-angle-left"></i></a>
</li>
<li class="sm:mr-1.75">
<a class="size-6 leading-6 text-center border border-warning/10 rounded-xl block bg-warning/10 duration-500 hover:bg-warning hover:text-white hover:border-warning text-warning ml-1.75" href="javascript:void(0);">1</a></li>
<li class="sm:mr-1.75 active">
<a class="size-6 leading-6 text-center border rounded-xl block duration-500 bg-warning text-white border-warning ml-1.75" href="javascript:void(0);">2</a>
</li>
<li class="sm:mr-1.75">
<a class="size-6 leading-6 text-center border border-warning/10 rounded-xl block bg-warning/10 duration-500 hover:bg-warning hover:text-white hover:border-warning text-warning ml-1.75" href="javascript:void(0);">3</a></li>
<li class="sm:mr-1.75">
<a class="size-6 leading-6 text-center border border-warning/10 rounded-xl block bg-warning/10 duration-500 hover:bg-warning hover:text-white hover:border-warning text-warning ml-1.75" href="javascript:void(0);">4</a></li>
<li class="sm:mr-1.75 page-indicator">
<a class="size-6 leading-6 text-center border border-warning/10 rounded-xl block bg-warning/10 duration-500 hover:bg-warning hover:text-white hover:border-warning text-warning ml-1.75" href="javascript:void(0);"><i class="la la-angle-right"></i></a>
</li>
</ul>
</nav>
Pagination Circle
add .rounded-full to change the style
<nav>
<ul class="flex mb-5 sm:text-base">
<li class="sm:mr-1.75 page-indicator">
<a class="size-10 leading-10 text-center border rounded-full block bg-primary/10 duration-500 hover:bg-primary hover:text-white border-primary dark:text-white ml-1.75" href="javascript:void(0);"><i class="la la-angle-left"></i></a>
</li>
<li class="sm:mr-1.75 active">
<a class="size-10 leading-10 text-center border rounded-full block duration-500 bg-primary text-white border-primary ml-1.75" href="javascript:void(0);">1</a>
</li>
<li class="sm:mr-1.75">
<a class="size-10 leading-10 text-center border border-bordercolor rounded-full block duration-500 hover:bg-primary hover:text-white hover:border-primary dark:text-white ml-1.75" href="javascript:void(0);">2</a></li>
<li class="sm:mr-1.75">
<a class="size-10 leading-10 text-center border border-bordercolor rounded-full block duration-500 hover:bg-primary hover:text-white hover:border-primary dark:text-white ml-1.75" href="javascript:void(0);">3</a></li>
<li class="sm:mr-1.75">
<a class="size-10 leading-10 text-center border border-bordercolor rounded-full block duration-500 hover:bg-primary hover:text-white hover:border-primary dark:text-white ml-1.75" href="javascript:void(0);">4</a></li>
<li class="sm:mr-1.75 page-indicator">
<a class="size-10 leading-10 text-center border rounded-full block bg-primary/10 duration-500 hover:bg-primary hover:text-white border-primary dark:text-white ml-1.75" href="javascript:void(0);"><i class="la la-angle-right"></i></a>
</li>
</ul>
</nav>
<nav>
<ul class="flex mb-5 sm:text-base">
<li class="sm:mr-1.75 page-indicator">
<a class="size-7.5 leading-7.5 text-center border rounded-full block bg-primary/10 duration-500 hover:bg-primary hover:text-white border-primary dark:text-white ml-1.75" href="javascript:void(0);"><i class="la la-angle-left"></i></a>
</li>
<li class="sm:mr-1.75 active">
<a class="size-7.5 leading-7.5 text-center border rounded-full block duration-500 bg-primary text-white border-primary ml-1.75" href="javascript:void(0);">1</a>
</li>
<li class="sm:mr-1.75">
<a class="size-7.5 leading-7.5 text-center border border-bordercolor rounded-full block duration-500 hover:bg-primary hover:text-white hover:border-primary dark:text-white ml-1.75" href="javascript:void(0);">2</a></li>
<li class="sm:mr-1.75">
<a class="size-7.5 leading-7.5 text-center border border-bordercolor rounded-full block duration-500 hover:bg-primary hover:text-white hover:border-primary dark:text-white ml-1.75" href="javascript:void(0);">3</a></li>
<li class="sm:mr-1.75">
<a class="size-7.5 leading-7.5 text-center border border-bordercolor rounded-full block duration-500 hover:bg-primary hover:text-white hover:border-primary dark:text-white ml-1.75" href="javascript:void(0);">4</a></li>
<li class="sm:mr-1.75 page-indicator">
<a class="size-7.5 leading-7.5 text-center border rounded-full block bg-primary/10 duration-500 hover:bg-primary hover:text-white border-primary dark:text-white ml-1.75" href="javascript:void(0);"><i class="la la-angle-right"></i></a>
</li>
</ul>
</nav>
<nav>
<ul class="flex mb-5 text-xs">
<li class="sm:mr-1.75 page-indicator">
<a class="size-6 leading-6 text-center border rounded-full block bg-primary/10 duration-500 hover:bg-primary hover:text-white border-primary dark:text-white ml-1.75" href="javascript:void(0);"><i class="la la-angle-left"></i></a>
</li>
<li class="sm:mr-1.75 active">
<a class="size-6 leading-6 text-center border rounded-full block duration-500 bg-primary text-white border-primary ml-1.75" href="javascript:void(0);">1</a>
</li>
<li class="sm:mr-1.75">
<a class="size-6 leading-6 text-center border border-bordercolor rounded-full block duration-500 hover:bg-primary hover:text-white hover:border-primary dark:text-white ml-1.75" href="javascript:void(0);">2</a></li>
<li class="sm:mr-1.75">
<a class="size-6 leading-6 text-center border border-bordercolor rounded-full block duration-500 hover:bg-primary hover:text-white hover:border-primary dark:text-white ml-1.75" href="javascript:void(0);">3</a></li>
<li class="sm:mr-1.75">
<a class="size-6 leading-6 text-center border border-bordercolor rounded-full block duration-500 hover:bg-primary hover:text-white hover:border-primary dark:text-white ml-1.75" href="javascript:void(0);">4</a></li>
<li class="sm:mr-1.75 page-indicator">
<a class="size-6 leading-6 text-center border rounded-full block bg-primary/10 duration-500 hover:bg-primary hover:text-white border-primary dark:text-white ml-1.75" href="javascript:void(0);"><i class="la la-angle-right"></i></a>
</li>
</ul>
</nav>