Basic Pagination
<nav aria-label="Page navigation">
<ul class="ti-pagination mb-0">
<li class="page-item disabled"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);">Previous</a></li>
<li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);">1</a></li>
<li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);">2</a></li>
<li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);">Next</a></li>
</ul>
</nav>
Pagination With Icons
<nav aria-label="Page navigation">
<ul class="ti-pagination mb-0">
<li class="page-item">
<a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);" aria-label="Previous">
<span aria-hidden="true"><i class="bi bi-caret-left"></i></span>
</a>
</li>
<li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);">1</a></li>
<li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);">2</a></li>
<li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);">3</a></li>
<li class="page-item">
<a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);" aria-label="Next">
<span aria-hidden="true"><i class="bi bi-caret-right"></i></span>
</a>
</li>
</ul>
</nav>
Pagination Sizing
<nav aria-label="...">
<ul class="ti-pagination pagination-sm mb-0">
<li class="page-item active" aria-current="page">
<span class="page-link px-3 py-[0.375rem]">1</span>
</li>
<li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);">2</a></li>
<li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);">3</a></li>
</ul>
</nav>
<nav aria-label="...">
<ul class="ti-pagination pagination-sm mb-0">
<li class="page-item " aria-current="page">
<span class="page-link active px-3 py-[0.375rem]">1</span>
</li>
<li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);">2</a></li>
<li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);">3</a></li>
</ul>
</nav>
<nav aria-label="...">
<ul class="pagination pagination-lg mb-0">
<li class="page-item active" aria-current="page">
<span class="page-link px-3 py-[0.375rem]">1</span>
</li>
<li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);">2</a></li>
<li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);">3</a></li>
</ul>
</nav>
Center & Right Aligned Pagination
<nav aria-label="Page navigation">
<ul class="ti-pagination justify-content-center">
<li class="page-item disabled">
<a class="page-link px-3 py-[0.375rem]">Previous</a>
</li>
<li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);">1</a></li>
<li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);">2</a></li>
<li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);">3</a></li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">Next</a>
</li>
</ul>
</nav>
<nav aria-label="Page navigation">
<ul class="pagination justify-content-end mb-0">
<li class="page-item disabled">
<a class="page-link">Previous</a>
</li>
<li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);">1</a></li>
<li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);">2</a></li>
<li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);">3</a></li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">Next</a>
</li>
</ul>
</nav>
Active and disabled states
<nav aria-label="..." class="me-3">
<ul class="ti-pagination">
<li class="page-item disabled">
<a class="page-link">Previous</a>
</li>
<li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);">1</a></li>
<li class="page-item active" aria-current="page">
<a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);">2</a>
</li>
<li class="page-item">
<a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);">Next</a>
</li>
</ul>
</nav>
<nav aria-label="...">
<ul class="pagination">
<li class="page-item disabled">
<span class="page-link px-3 py-[0.375rem]">Previous</span>
</li>
<li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);">1</a></li>
<li class="page-item active" aria-current="page">
<span class="page-link px-3 py-[0.375rem]">2</span>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">Next</a>
</li>
</ul>
</nav>
Pagination Style-1
<nav aria-label="Page navigation" class="pagination-style-1">
<ul class="ti-pagination mb-0">
<li class="page-item disabled">
<a class="page-link" href="javascript:void(0);">
<i class="ri-arrow-left-s-line align-middle"></i>
</a>
</li>
<li class="page-item"><a class="page-link" href="javascript:void(0);">1</a></li>
<li class="page-item active"><a class="page-link" href="javascript:void(0);">2</a></li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">
<i class="bi bi-three-dots"></i>
</a>
</li>
<li class="page-item"><a class="page-link" href="javascript:void(0);">21</a></li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">
<i class="ri-arrow-right-s-line align-middle"></i>
</a>
</li>
</ul>
</nav>
Pagination Style-2
<nav aria-label="Page navigation" class="pagination-style-2">
<ul class="ti-pagination mb-0 flex-wrap">
<li class="page-item disabled">
<a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);">
Prev
</a>
</li>
<li class="page-item active"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);">1</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>
<li class="page-item">
<a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);">
<i class="bi bi-three-dots"></i>
</a>
</li>
<li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);">17</a></li>
<li class="page-item">
<a class="page-link text-primary" href="javascript:void(0);">
next
</a>
</li>
</ul>
</nav>
Pagination Style-3
<nav aria-label="Page navigation" class="pagination-style-3">
<ul class="ti-pagination mb-0 flex-wrap">
<li class="page-item disabled">
<a class="page-link" href="javascript:void(0);">
Prev
</a>
</li>
<li class="page-item active"><a class="page-link" href="javascript:void(0);">1</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">
<i class="bi bi-three-dots"></i>
</a>
</li>
<li class="page-item"><a class="page-link" href="javascript:void(0);">16</a></li>
<li class="page-item">
<a class="page-link text-primary" href="javascript:void(0);">
next
</a>
</li>
</ul>
</nav>
Pagination Style-4
<nav aria-label="Page navigation" class="pagination-style-4">
<ul class="ti-pagination mb-0 flex-wrap">
<li class="page-item disabled">
<a class="page-link" href="javascript:void(0);">
Prev
</a>
</li>
<li class="page-item active"><a class="page-link" href="javascript:void(0);">1</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">
<i class="bi bi-three-dots"></i>
</a>
</li>
<li class="page-item"><a class="page-link" href="javascript:void(0);">16</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0);">17</a></li>
<li class="page-item">
<a class="page-link text-primary" href="javascript:void(0);">
next
</a>
</li>
</ul>
</nav>Pagination Style 5
<nav class="flex items-center gap-x-1">
<button type="button" class="min-h-[38px] min-w-[38px] py-2 px-2.5 inline-flex jusify-center items-center gap-x-2 text-sm rounded-md text-gray-800 hover:bg-gray-100 focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">
<svg class="flex-shrink-0 size-3.5 rtl:rotate-[180deg]" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
<span aria-hidden="true" class="sr-only">Previous</span>
</button>
<div class="flex items-center gap-x-1">
<button type="button" class="min-h-[38px] min-w-[38px] flex justify-center items-center bg-primary text-white py-2 px-3 text-sm rounded-md focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:bg-primary dark:text-white dark:focus:bg-gray-500" aria-current="page">1</button>
<button type="button" class="min-h-[38px] min-w-[38px] flex justify-center items-center text-gray-800 hover:bg-gray-100 py-2 px-3 text-sm rounded-md focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">2</button>
<button type="button" class="min-h-[38px] min-w-[38px] flex justify-center items-center text-gray-800 hover:bg-gray-100 py-2 px-3 text-sm rounded-md focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">3</button>
<div class="hs-tooltip ti-main-tooltip">
<button type="button" class="hs-tooltip-toggle group min-h-[38px] min-w-[38px] flex justify-center items-center text-gray-400 hover:text-primary p-2 text-sm rounded-md focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:text-primary dark:focus:bg-white/10">
<span class="group-hover:hidden text-xs">•••</span>
<svg class="group-hover:block hidden flex-shrink-0 size-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 17 5-5-5-5"/><path d="m13 17 5-5-5-5"/></svg>
<span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 !bg-black text-xs font-medium text-white shadow-sm dark:bg-bodybg" role="tooltip">
Next 4 pages
</span>
</button>
</div>
<button type="button" class="min-h-[38px] min-w-[38px] flex justify-center items-center text-gray-800 hover:bg-gray-100 py-2 px-3 text-sm rounded-md focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">8</button>
</div>
<button type="button" class="min-h-[38px] min-w-[38px] py-2 px-2.5 inline-flex jusify-center items-center gap-x-2 text-sm rounded-md text-gray-800 hover:bg-gray-100 focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">
<span aria-hidden="true" class="sr-only">Next</span>
<svg class="flex-shrink-0 size-3.5 rtl:rotate-[180deg]" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
</button>
</nav>
<!-- End Pagination -->
<!-- Pagination -->
<nav class="flex items-center gap-x-1">
<button type="button" class="min-h-[38px] min-w-[38px] py-2 px-2.5 inline-flex justify-center items-center gap-x-2 text-sm rounded-md border border-transparent text-gray-800 hover:bg-gray-100 focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:border-transparent dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">
<svg class="flex-shrink-0 size-3.5 rtl:rotate-[180deg]" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
<span aria-hidden="true" class="sr-only">Previous</span>
</button>
<div class="flex items-center gap-x-1">
<button type="button" class="min-h-[38px] min-w-[38px] flex justify-center items-center border border-primary text-primary py-2 px-3 text-sm rounded-md focus:outline-none focus:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:border-primary dark:text-primary dark:focus:bg-white/10" aria-current="page">1</button>
<button type="button" class="min-h-[38px] min-w-[38px] flex justify-center items-center border border-transparent text-gray-800 hover:bg-gray-100 py-2 px-3 text-sm rounded-md focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:border-transparent dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">2</button>
<button type="button" class="min-h-[38px] min-w-[38px] flex justify-center items-center border border-transparent text-gray-800 hover:bg-gray-100 py-2 px-3 text-sm rounded-md focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:border-transparent dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">3</button>
<div class="hs-tooltip ti-main-tooltip">
<button type="button" class="hs-tooltip-toggle group min-h-[38px] min-w-[38px] flex justify-center items-center text-gray-400 hover:text-primary p-2 text-sm rounded-md focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:text-primary dark:focus:bg-white/10">
<span class="group-hover:hidden text-xs">•••</span>
<svg class="group-hover:block hidden flex-shrink-0 size-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 17 5-5-5-5"/><path d="m13 17 5-5-5-5"/></svg>
<span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 !bg-black text-xs font-medium text-white shadow-sm dark:bg-bodybg" role="tooltip">
Next 4 pages
</span>
</button>
</div>
<button type="button" class="min-h-[38px] min-w-[38px] flex justify-center items-center border border-transparent text-gray-800 hover:bg-gray-100 py-2 px-3 text-sm rounded-md focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:border-transparent dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">8</button>
</div>
<button type="button" class="min-h-[38px] min-w-[38px] py-2 px-2.5 inline-flex justify-center items-center gap-x-2 text-sm rounded-md border border-transparent text-gray-800 hover:bg-gray-100 focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:border-transparent dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">
<span aria-hidden="true" class="sr-only">Next</span>
<svg class="flex-shrink-0 size-3.5 rtl:rotate-[180deg]" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
</button>
</nav>
<!-- End Pagination -->
<!-- Pagination -->
<nav class="flex items-center -space-x-px">
<button type="button" class="min-h-[38px] min-w-[38px] py-2 px-2.5 inline-flex justify-center items-center gap-x-1.5 text-sm first:rounded-s-md last:rounded-e-md border border-gray-200 text-gray-800 hover:bg-gray-100 focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:border-white/10 dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">
<svg class="flex-shrink-0 size-3.5 rtl:rotate-[180deg]" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
<span aria-hidden="true" class="sr-only">Previous</span>
</button>
<button type="button" class="min-h-[38px] min-w-[38px] flex justify-center items-center bg-primary text-white border border-gray-200 py-2 px-3 text-sm first:rounded-s-md last:rounded-e-md focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:bg-primary dark:border-white/10 dark:text-white dark:focus:bg-gray-500" aria-current="page">1</button>
<button type="button" class="min-h-[38px] min-w-[38px] flex justify-center items-center border border-gray-200 text-gray-800 hover:bg-gray-100 py-2 px-3 text-sm first:rounded-s-md last:rounded-e-md focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:border-white/10 dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">2</button>
<button type="button" class="min-h-[38px] min-w-[38px] flex justify-center items-center border border-gray-200 text-gray-800 hover:bg-gray-100 py-2 px-3 text-sm first:rounded-s-md last:rounded-e-md focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:border-white/10 dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">3</button>
<div class="hs-tooltip ti-main-tooltip border border-gray-200 dark:border-white/10">
<button type="button" class="hs-tooltip-toggle group min-h-[36px] min-w-[36px] flex justify-center items-center text-gray-400 hover:text-primary p-2 text-sm focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:text-primary dark:focus:bg-white/10">
<span class="group-hover:hidden text-xs">•••</span>
<svg class="group-hover:block hidden flex-shrink-0 size-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 17 5-5-5-5"/><path d="m13 17 5-5-5-5"/></svg>
<span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 !bg-black text-xs font-medium text-white shadow-sm dark:bg-bodybg" role="tooltip">
Next 4 pages
</span>
</button>
</div>
<button type="button" class="min-h-[38px] min-w-[38px] flex justify-center items-center border border-gray-200 text-gray-800 hover:bg-gray-100 py-2 px-3 text-sm first:rounded-s-md last:rounded-e-md focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:border-white/10 dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">8</button>
<button type="button" class="min-h-[38px] min-w-[38px] py-2 px-2.5 inline-flex justify-center items-center gap-x-1.5 text-sm first:rounded-s-md last:rounded-e-md border border-gray-200 text-gray-800 hover:bg-gray-100 focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:border-white/10 dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">
<span aria-hidden="true" class="sr-only">Next</span>
<svg class="flex-shrink-0 size-3.5 rtl:rotate-[180deg]" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
</button>
</nav>
Pagination Style 6
Go to
page
Go to
page
Go to
page
<div class="grid justify-center sm:flex sm:justify-between sm:items-center gap-1">
<!-- Pagination Wrapper -->
<nav class="flex items-center gap-x-1">
<button type="button"
class="min-h-[38px] min-w-[38px] py-2 px-2.5 inline-flex jusify-center items-center gap-x-2 text-sm rounded-md text-gray-800 hover:bg-gray-100 focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">
<svg class="flex-shrink-0 size-3.5 rtl:rotate-[180deg]" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="m15 18-6-6 6-6" />
</svg>
<span aria-hidden="true" class="sr-only">Previous</span>
</button>
<div class="flex items-center gap-x-1">
<button type="button"
class="min-h-[38px] min-w-[38px] flex justify-center items-center bg-primary text-white py-2 px-3 text-sm rounded-md focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:bg-primary dark:text-white dark:focus:bg-gray-500"
aria-current="page">1</button>
<button type="button"
class="min-h-[38px] min-w-[38px] flex justify-center items-center text-gray-800 hover:bg-gray-100 py-2 px-3 text-sm rounded-md focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">2</button>
<button type="button"
class="min-h-[38px] min-w-[38px] flex justify-center items-center text-gray-800 hover:bg-gray-100 py-2 px-3 text-sm rounded-md focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">3</button>
<div class="hs-tooltip ti-main-tooltip">
<button type="button"
class="hs-tooltip-toggle group min-h-[38px] min-w-[38px] flex justify-center items-center text-gray-400 hover:text-primary p-2 text-sm rounded-md focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:text-primary dark:focus:bg-white/10">
<span class="group-hover:hidden text-xs">•••</span>
<svg class="group-hover:block hidden flex-shrink-0 size-5" xmlns="http://www.w3.org/2000/svg"
width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="m6 17 5-5-5-5" />
<path d="m13 17 5-5-5-5" />
</svg>
<span
class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 !bg-black text-xs font-medium text-white shadow-sm dark:bg-bodybg"
role="tooltip">
Next 4 pages
</span>
</button>
</div>
<button type="button"
class="min-h-[38px] min-w-[38px] flex justify-center items-center text-gray-800 hover:bg-gray-100 py-2 px-3 text-sm rounded-md focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">8</button>
</div>
<button type="button"
class="min-h-[38px] min-w-[38px] py-2 px-2.5 inline-flex jusify-center items-center gap-x-2 text-sm rounded-md text-gray-800 hover:bg-gray-100 focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">
<span aria-hidden="true" class="sr-only">Next</span>
<svg class="flex-shrink-0 size-3.5 rtl:rotate-[180deg]" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="m9 18 6-6-6-6" />
</svg>
</button>
</nav>
<!-- End Pagination -->
<!-- Go To Page -->
<div class="flex justify-center sm:justify-start items-center gap-x-2">
<span class="text-sm text-gray-800 whitespace-nowrap dark:text-white">
Go to
</span>
<input type="number"
class="min-h-[38px] py-2 px-2.5 block w-12 border-gray-200 rounded-md text-sm text-center focus:border-primary focus:ring-primary [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-gray-400 dark:focus:ring-gray-600"
style="-moz-appearance: textfield;">
<span class="text-sm text-gray-800 whitespace-nowrap dark:text-white">
page
</span>
</div>
<!-- End Go To Page -->
</div>
<!-- End Pagination Wrapper -->
<!-- Pagination Wrapper -->
<div class="grid justify-center sm:flex sm:justify-between sm:items-center gap-1">
<!-- Pagination -->
<nav class="flex items-center gap-x-1">
<button type="button"
class="min-h-[38px] min-w-[38px] py-2 px-2.5 inline-flex justify-center items-center gap-x-2 text-sm rounded-md border border-transparent text-gray-800 hover:bg-gray-100 focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:border-transparent dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">
<svg class="flex-shrink-0 size-3.5 rtl:rotate-[180deg]" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="m15 18-6-6 6-6" />
</svg>
<span aria-hidden="true" class="sr-only">Previous</span>
</button>
<div class="flex items-center gap-x-1">
<button type="button"
class="min-h-[38px] min-w-[38px] flex justify-center items-center border border-primary text-primary py-2 px-3 text-sm rounded-md focus:outline-none focus:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:border-primary dark:text-primary dark:focus:bg-white/10"
aria-current="page">1</button>
<button type="button"
class="min-h-[38px] min-w-[38px] flex justify-center items-center border border-transparent text-gray-800 hover:bg-gray-100 py-2 px-3 text-sm rounded-md focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:border-transparent dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">2</button>
<button type="button"
class="min-h-[38px] min-w-[38px] flex justify-center items-center border border-transparent text-gray-800 hover:bg-gray-100 py-2 px-3 text-sm rounded-md focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:border-transparent dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">3</button>
<div class="hs-tooltip ti-main-tooltip">
<button type="button"
class="hs-tooltip-toggle group min-h-[38px] min-w-[38px] flex justify-center items-center text-gray-400 hover:text-primary p-2 text-sm rounded-md focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:text-primary dark:focus:bg-white/10">
<span class="group-hover:hidden text-xs">•••</span>
<svg class="group-hover:block hidden flex-shrink-0 size-5" xmlns="http://www.w3.org/2000/svg"
width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="m6 17 5-5-5-5" />
<path d="m13 17 5-5-5-5" />
</svg>
<span
class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 !bg-black text-xs font-medium text-white shadow-sm dark:bg-bodybg"
role="tooltip">
Next 4 pages
</span>
</button>
</div>
<button type="button"
class="min-h-[38px] min-w-[38px] flex justify-center items-center border border-transparent text-gray-800 hover:bg-gray-100 py-2 px-3 text-sm rounded-md focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:border-transparent dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">8</button>
</div>
<button type="button"
class="min-h-[38px] min-w-[38px] py-2 px-2.5 inline-flex justify-center items-center gap-x-2 text-sm rounded-md border border-transparent text-gray-800 hover:bg-gray-100 focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:border-transparent dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">
<span aria-hidden="true" class="sr-only">Next</span>
<svg class="flex-shrink-0 size-3.5 rtl:rotate-[180deg]" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="m9 18 6-6-6-6" />
</svg>
</button>
</nav>
<!-- End Pagination -->
<!-- Go To Page -->
<div class="flex justify-center sm:justify-start items-center gap-x-2">
<span class="text-sm text-gray-800 whitespace-nowrap dark:text-white">
Go to
</span>
<input type="number"
class="min-h-[38px] py-2 px-2.5 block w-12 border-gray-200 rounded-md text-sm text-center focus:border-primary focus:ring-primary [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-gray-400 dark:focus:ring-gray-600"
style="-moz-appearance: textfield;">
<span class="text-sm text-gray-800 whitespace-nowrap dark:text-white">
page
</span>
</div>
<!-- End Go To Page -->
</div>
<!-- End Pagination Wrapper -->
<!-- Pagination Wrapper -->
<div class="grid justify-center sm:flex sm:justify-between sm:items-center gap-1">
<!-- Pagination -->
<nav class="flex items-center -space-x-px">
<button type="button"
class="min-h-[38px] min-w-[38px] py-2 px-2.5 inline-flex justify-center items-center gap-x-1.5 text-sm first:rounded-s-md last:rounded-e-md border border-gray-200 text-gray-800 hover:bg-gray-100 focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:border-white/10 dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">
<svg class="flex-shrink-0 size-3.5 rtl:rotate-[180deg]" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="m15 18-6-6 6-6" />
</svg>
<span aria-hidden="true" class="sr-only">Previous</span>
</button>
<button type="button"
class="min-h-[38px] min-w-[38px] flex justify-center items-center bg-primary text-white border border-gray-200 py-2 px-3 text-sm first:rounded-s-md last:rounded-e-md focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:bg-primary dark:border-white/10 dark:text-white dark:focus:bg-gray-500"
aria-current="page">1</button>
<button type="button"
class="min-h-[38px] min-w-[38px] flex justify-center items-center border border-gray-200 text-gray-800 hover:bg-gray-100 py-2 px-3 text-sm first:rounded-s-md last:rounded-e-md focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:border-white/10 dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">2</button>
<button type="button"
class="min-h-[38px] min-w-[38px] flex justify-center items-center border border-gray-200 text-gray-800 hover:bg-gray-100 py-2 px-3 text-sm first:rounded-s-md last:rounded-e-md focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:border-white/10 dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">3</button>
<div class="hs-tooltip ti-main-tooltip border border-gray-200 dark:border-white/10">
<button type="button"
class="hs-tooltip-toggle group min-h-[36px] min-w-[36px] flex justify-center items-center text-gray-400 hover:text-primary p-2 text-sm focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:text-primary dark:focus:bg-white/10">
<span class="group-hover:hidden text-xs">•••</span>
<svg class="group-hover:block hidden flex-shrink-0 size-5" xmlns="http://www.w3.org/2000/svg"
width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<path d="m6 17 5-5-5-5" />
<path d="m13 17 5-5-5-5" />
</svg>
<span
class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 !bg-black text-xs font-medium text-white shadow-sm dark:bg-bodybg"
role="tooltip">
Next 4 pages
</span>
</button>
</div>
<button type="button"
class="min-h-[38px] min-w-[38px] flex justify-center items-center border border-gray-200 text-gray-800 hover:bg-gray-100 py-2 px-3 text-sm first:rounded-s-md last:rounded-e-md focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:border-white/10 dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">8</button>
<button type="button"
class="min-h-[38px] min-w-[38px] py-2 px-2.5 inline-flex justify-center items-center gap-x-1.5 text-sm first:rounded-s-md last:rounded-e-md border border-gray-200 text-gray-800 hover:bg-gray-100 focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:border-white/10 dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">
<span aria-hidden="true" class="sr-only">Next</span>
<svg class="flex-shrink-0 size-3.5 rtl:rotate-[180deg]" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="m9 18 6-6-6-6" />
</svg>
</button>
</nav>
<!-- End Pagination -->
<!-- Go To Page -->
<div class="flex justify-center sm:justify-start items-center gap-x-2">
<span class="text-sm text-gray-800 whitespace-nowrap dark:text-white">
Go to
</span>
<input type="number"
class="min-h-[38px] py-2 px-2.5 block w-12 border-gray-200 rounded-md text-sm text-center focus:border-primary focus:ring-primary [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-gray-400 dark:focus:ring-gray-600"
style="-moz-appearance: textfield;">
<span class="text-sm text-gray-800 whitespace-nowrap dark:text-white">
page
</span>
</div>
<!-- End Go To Page -->
</div>
Pagination Style 7
<div class="grid justify-center sm:flex sm:justify-between sm:items-center gap-1">
<!-- Pagination Wrapper -->
<nav class="flex items-center gap-x-1">
<button type="button"
class="min-h-[38px] min-w-[38px] py-2 px-2.5 inline-flex jusify-center items-center gap-x-2 text-sm rounded-md text-gray-800 hover:bg-gray-100 focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">
<svg class="flex-shrink-0 size-3.5 rtl:rotate-[180deg]" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="m15 18-6-6 6-6" />
</svg>
<span aria-hidden="true" class="sr-only">Previous</span>
</button>
<div class="flex items-center gap-x-1">
<button type="button"
class="min-h-[38px] min-w-[38px] flex justify-center items-center bg-primary text-white py-2 px-3 text-sm rounded-md focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:bg-primary dark:text-white dark:focus:bg-gray-500"
aria-current="page">1</button>
<button type="button"
class="min-h-[38px] min-w-[38px] flex justify-center items-center text-gray-800 hover:bg-gray-100 py-2 px-3 text-sm rounded-md focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">2</button>
<button type="button"
class="min-h-[38px] min-w-[38px] flex justify-center items-center text-gray-800 hover:bg-gray-100 py-2 px-3 text-sm rounded-md focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">3</button>
<div class="hs-tooltip ti-main-tooltip">
<button type="button"
class="hs-tooltip-toggle group min-h-[38px] min-w-[38px] flex justify-center items-center text-gray-400 hover:text-primary p-2 text-sm rounded-md focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:text-primary dark:focus:bg-white/10">
<span class="group-hover:hidden text-xs">•••</span>
<svg class="group-hover:block hidden flex-shrink-0 size-5" xmlns="http://www.w3.org/2000/svg"
width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="m6 17 5-5-5-5" />
<path d="m13 17 5-5-5-5" />
</svg>
<span
class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 !bg-black text-xs font-medium text-white shadow-sm dark:bg-bodybg"
role="tooltip">
Next 4 pages
</span>
</button>
</div>
<button type="button"
class="min-h-[38px] min-w-[38px] flex justify-center items-center text-gray-800 hover:bg-gray-100 py-2 px-3 text-sm rounded-md focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">8</button>
</div>
<button type="button"
class="min-h-[38px] min-w-[38px] py-2 px-2.5 inline-flex jusify-center items-center gap-x-2 text-sm rounded-md text-gray-800 hover:bg-gray-100 focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">
<span aria-hidden="true" class="sr-only">Next</span>
<svg class="flex-shrink-0 size-3.5 rtl:rotate-[180deg]" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="m9 18 6-6-6-6" />
</svg>
</button>
</nav>
<!-- End Pagination -->
<!-- Dropdown -->
<div class="hs-dropdown ti-dropdown [--placement:top-left]">
<button id="hs-pagination-dropdown" type="button"
class="hs-dropdown-toggle !py-1.5 !px-2 ti-dropdown-toggle">
5 page
<svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="m6 9 6 6 6-6" />
</svg>
</button>
<div class="hs-dropdown-menu ti-dropdown-menu" aria-labelledby="hs-pagination-dropdown">
<button type="button" class="ti-dropdown-item w-full justify-between">
5 page
<i class="ri-check-line text-primary flex-shrink-0 size-4"></i>
</button>
<button type="button" class="ti-dropdown-item w-full">
8 page
</button>
<button type="button" class="ti-dropdown-item w-full">
10 page
</button>
</div>
</div>
<!-- End Dropdown -->
</div>
<!-- End Pagination Wrapper -->
<!-- Pagination Wrapper -->
<div class="grid justify-center sm:flex sm:justify-between sm:items-center gap-1">
<!-- Pagination -->
<nav class="flex items-center gap-x-1">
<button type="button"
class="min-h-[38px] min-w-[38px] py-2 px-2.5 inline-flex justify-center items-center gap-x-2 text-sm rounded-md border border-transparent text-gray-800 hover:bg-gray-100 focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:border-transparent dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">
<svg class="flex-shrink-0 size-3.5 rtl:rotate-[180deg]" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="m15 18-6-6 6-6" />
</svg>
<span aria-hidden="true" class="sr-only">Previous</span>
</button>
<div class="flex items-center gap-x-1">
<button type="button"
class="min-h-[38px] min-w-[38px] flex justify-center items-center border border-primary text-primary py-2 px-3 text-sm rounded-md focus:outline-none focus:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:border-primary dark:text-primary dark:focus:bg-white/10"
aria-current="page">1</button>
<button type="button"
class="min-h-[38px] min-w-[38px] flex justify-center items-center border border-transparent text-gray-800 hover:bg-gray-100 py-2 px-3 text-sm rounded-md focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:border-transparent dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">2</button>
<button type="button"
class="min-h-[38px] min-w-[38px] flex justify-center items-center border border-transparent text-gray-800 hover:bg-gray-100 py-2 px-3 text-sm rounded-md focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:border-transparent dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">3</button>
<div class="hs-tooltip ti-main-tooltip">
<button type="button"
class="hs-tooltip-toggle group min-h-[38px] min-w-[38px] flex justify-center items-center text-gray-400 hover:text-primary p-2 text-sm rounded-md focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:text-primary dark:focus:bg-white/10">
<span class="group-hover:hidden text-xs">•••</span>
<svg class="group-hover:block hidden flex-shrink-0 size-5" xmlns="http://www.w3.org/2000/svg"
width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="m6 17 5-5-5-5" />
<path d="m13 17 5-5-5-5" />
</svg>
<span
class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 !bg-black text-xs font-medium text-white shadow-sm dark:bg-bodybg"
role="tooltip">
Next 4 pages
</span>
</button>
</div>
<button type="button"
class="min-h-[38px] min-w-[38px] flex justify-center items-center border border-transparent text-gray-800 hover:bg-gray-100 py-2 px-3 text-sm rounded-md focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:border-transparent dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">8</button>
</div>
<button type="button"
class="min-h-[38px] min-w-[38px] py-2 px-2.5 inline-flex justify-center items-center gap-x-2 text-sm rounded-md border border-transparent text-gray-800 hover:bg-gray-100 focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:border-transparent dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">
<span aria-hidden="true" class="sr-only">Next</span>
<svg class="flex-shrink-0 size-3.5 rtl:rotate-[180deg]" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="m9 18 6-6-6-6" />
</svg>
</button>
</nav>
<!-- End Pagination -->
<!-- Dropdown -->
<div class="hs-dropdown ti-dropdown [--placement:top-left]">
<button id="hs-pagination-dropdown2" type="button"
class="hs-dropdown-toggle !py-1.5 !px-2 ti-dropdown-toggle">
5 page
<svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="m6 9 6 6 6-6" />
</svg>
</button>
<div class="hs-dropdown-menu ti-dropdown-menu" aria-labelledby="hs-pagination-dropdown2">
<button type="button" class="ti-dropdown-item w-full justify-between">
5 page
<i class="ri-check-line text-primary flex-shrink-0 size-4"></i>
</button>
<button type="button" class="ti-dropdown-item w-full">
8 page
</button>
<button type="button" class="ti-dropdown-item w-full">
10 page
</button>
</div>
</div>
<!-- End Dropdown -->
</div>
<!-- End Pagination Wrapper -->
<!-- Pagination Wrapper -->
<div class="grid justify-center sm:flex sm:justify-between sm:items-center gap-1">
<!-- Pagination -->
<nav class="flex items-center -space-x-px">
<button type="button"
class="min-h-[38px] min-w-[38px] py-2 px-2.5 inline-flex justify-center items-center gap-x-1.5 text-sm first:rounded-s-md last:rounded-e-md border border-gray-200 text-gray-800 hover:bg-gray-100 focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:border-white/10 dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">
<svg class="flex-shrink-0 size-3.5 rtl:rotate-[180deg]" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="m15 18-6-6 6-6" />
</svg>
<span aria-hidden="true" class="sr-only">Previous</span>
</button>
<button type="button"
class="min-h-[38px] min-w-[38px] flex justify-center items-center bg-primary text-white border border-gray-200 py-2 px-3 text-sm first:rounded-s-md last:rounded-e-md focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:bg-primary dark:border-white/10 dark:text-white dark:focus:bg-gray-500"
aria-current="page">1</button>
<button type="button"
class="min-h-[38px] min-w-[38px] flex justify-center items-center border border-gray-200 text-gray-800 hover:bg-gray-100 py-2 px-3 text-sm first:rounded-s-md last:rounded-e-md focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:border-white/10 dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">2</button>
<button type="button"
class="min-h-[38px] min-w-[38px] flex justify-center items-center border border-gray-200 text-gray-800 hover:bg-gray-100 py-2 px-3 text-sm first:rounded-s-md last:rounded-e-md focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:border-white/10 dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">3</button>
<div class="hs-tooltip ti-main-tooltip border border-gray-200 dark:border-white/10">
<button type="button"
class="hs-tooltip-toggle group min-h-[36px] min-w-[36px] flex justify-center items-center text-gray-400 hover:text-primary p-2 text-sm focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:text-primary dark:focus:bg-white/10">
<span class="group-hover:hidden text-xs">•••</span>
<svg class="group-hover:block hidden flex-shrink-0 size-5" xmlns="http://www.w3.org/2000/svg"
width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<path d="m6 17 5-5-5-5" />
<path d="m13 17 5-5-5-5" />
</svg>
<span
class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 !bg-black text-xs font-medium text-white shadow-sm dark:bg-bodybg"
role="tooltip">
Next 4 pages
</span>
</button>
</div>
<button type="button"
class="min-h-[38px] min-w-[38px] flex justify-center items-center border border-gray-200 text-gray-800 hover:bg-gray-100 py-2 px-3 text-sm first:rounded-s-md last:rounded-e-md focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:border-white/10 dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">8</button>
<button type="button"
class="min-h-[38px] min-w-[38px] py-2 px-2.5 inline-flex justify-center items-center gap-x-1.5 text-sm first:rounded-s-md last:rounded-e-md border border-gray-200 text-gray-800 hover:bg-gray-100 focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:border-white/10 dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">
<span aria-hidden="true" class="sr-only">Next</span>
<svg class="flex-shrink-0 size-3.5 rtl:rotate-[180deg]" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="m9 18 6-6-6-6" />
</svg>
</button>
</nav>
<!-- End Pagination -->
<!-- Dropdown -->
<div class="hs-dropdown ti-dropdown [--placement:top-left]">
<button id="hs-pagination-dropdown3" type="button"
class="hs-dropdown-toggle !py-1.5 !px-2 ti-dropdown-toggle">
5 page
<svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="m6 9 6 6 6-6" />
</svg>
</button>
<div class="hs-dropdown-menu ti-dropdown-menu" aria-labelledby="hs-pagination-dropdown3">
<button type="button" class="ti-dropdown-item w-full justify-between">
5 page
<i class="ri-check-line text-primary flex-shrink-0 size-4"></i>
</button>
<button type="button" class="ti-dropdown-item w-full">
8 page
</button>
<button type="button" class="ti-dropdown-item w-full">
10 page
</button>
</div>
</div>
<!-- End Dropdown -->
</div>
Pagination Style 8
<nav class="flex justify-between items-center gap-x-1">
<button type="button"
class="min-h-[38px] min-w-[38px] py-2 px-2.5 inline-flex jusify-center items-center gap-x-2 text-sm rounded-md text-gray-800 hover:bg-gray-100 focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">
<svg class="flex-shrink-0 size-3.5 rtl:rotate-[180deg]" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="m15 18-6-6 6-6" />
</svg>
<span aria-hidden="true" class="hidden sm:block">Previous</span>
</button>
<div class="flex items-center gap-x-1">
<button type="button"
class="min-h-[38px] min-w-[38px] flex justify-center items-center bg-primary text-white py-2 px-3 text-sm rounded-md focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:bg-primary dark:text-white dark:focus:bg-gray-500"
aria-current="page">1</button>
<button type="button"
class="min-h-[38px] min-w-[38px] flex justify-center items-center text-gray-800 hover:bg-gray-100 py-2 px-3 text-sm rounded-md focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">2</button>
<button type="button"
class="min-h-[38px] min-w-[38px] flex justify-center items-center text-gray-800 hover:bg-gray-100 py-2 px-3 text-sm rounded-md focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">3</button>
</div>
<button type="button"
class="min-h-[38px] min-w-[38px] py-2 px-2.5 inline-flex jusify-center items-center gap-x-2 text-sm rounded-md text-gray-800 hover:bg-gray-100 focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">
<span aria-hidden="true" class="hidden sm:block">Next</span>
<svg class="flex-shrink-0 size-3.5 rtl:rotate-[180deg]" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="m9 18 6-6-6-6" />
</svg>
</button>
</nav>
<!-- End Pagination -->
<!-- Pagination -->
<nav class="flex justify-between items-center gap-x-1">
<button type="button"
class="min-h-[38px] min-w-[38px] py-2 px-2.5 inline-flex justify-center items-center gap-x-2 text-sm rounded-md border border-transparent text-gray-800 hover:bg-gray-100 focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:border-transparent dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">
<svg class="flex-shrink-0 size-3.5 rtl:rotate-[180deg]" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="m15 18-6-6 6-6" />
</svg>
<span aria-hidden="true" class="hidden sm:block">Previous</span>
</button>
<div class="flex items-center gap-x-1">
<button type="button"
class="min-h-[38px] min-w-[38px] flex justify-center items-center border border-primary text-primary py-2 px-3 text-sm rounded-md focus:outline-none focus:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:border-primary dark:text-primary dark:focus:bg-white/10"
aria-current="page">1</button>
<button type="button"
class="min-h-[38px] min-w-[38px] flex justify-center items-center border border-transparent text-gray-800 hover:bg-gray-100 py-2 px-3 text-sm rounded-md focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:border-transparent dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">2</button>
<button type="button"
class="min-h-[38px] min-w-[38px] flex justify-center items-center border border-transparent text-gray-800 hover:bg-gray-100 py-2 px-3 text-sm rounded-md focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:border-transparent dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">3</button>
</div>
<button type="button"
class="min-h-[38px] min-w-[38px] py-2 px-2.5 inline-flex justify-center items-center gap-x-2 text-sm rounded-md border border-transparent text-gray-800 hover:bg-gray-100 focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:border-transparent dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">
<span aria-hidden="true" class="hidden sm:block">Next</span>
<svg class="flex-shrink-0 size-3.5 rtl:rotate-[180deg]" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="m9 18 6-6-6-6" />
</svg>
</button>
</nav>
<!-- End Pagination -->
<!-- Pagination -->
<nav class="flex justify-between items-center gap-x-1">
<button type="button"
class="min-h-[38px] min-w-[38px] py-2 px-2.5 inline-flex justify-center items-center gap-x-2 text-sm rounded-md text-gray-800 hover:bg-gray-100 focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">
<svg class="flex-shrink-0 size-3.5 rtl:rotate-[180deg]" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="m15 18-6-6 6-6" />
</svg>
<span aria-hidden="true" class="hidden sm:block">Previous</span>
</button>
<div class="flex items-center gap-x-1">
<span
class="min-h-[38px] min-w-[38px] flex justify-center items-center border border-primary text-primary py-2 px-3 text-sm rounded-md focus:outline-none focus:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:border-primary dark:text-primary dark:focus:bg-white/10">1</span>
<span
class="min-h-[38px] flex justify-center items-center text-gray-500 py-2 px-1.5 text-sm dark:text-white">of</span>
<span
class="min-h-[38px] flex justify-center items-center text-gray-500 py-2 px-1.5 text-sm dark:text-white">3</span>
</div>
<button type="button"
class="min-h-[38px] min-w-[38px] py-2 px-2.5 inline-flex justify-center items-center gap-x-2 text-sm rounded-md text-gray-800 hover:bg-gray-100 focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">
<span aria-hidden="true" class="hidden sm:block">Next</span>
<svg class="flex-shrink-0 size-3.5 rtl:rotate-[180deg]" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="m9 18 6-6-6-6" />
</svg>
</button>
</nav>
Pagination Style 9
Go to
page
Go to
page
Go to
page
<div class="grid justify-center sm:flex sm:justify-start sm:items-center gap-2">
<!-- Pagination Wrapper -->
<nav class="flex items-center gap-x-1">
<button type="button"
class="min-h-[32px] min-w-8 py-2 px-2.5 inline-flex jusify-center items-center gap-x-2 text-sm rounded-md text-gray-800 hover:bg-gray-100 focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">
<svg class="flex-shrink-0 size-3.5 rtl:rotate-[180deg]" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="m15 18-6-6 6-6" />
</svg>
<span aria-hidden="true" class="sr-only">Previous</span>
</button>
<div class="flex items-center gap-x-1">
<button type="button"
class="min-h-[32px] min-w-8 flex justify-center items-center bg-primary text-white py-1 px-2.5 text-sm rounded-md focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:bg-primary dark:text-white dark:focus:bg-gray-500"
aria-current="page">1</button>
<button type="button"
class="min-h-[32px] min-w-8 flex justify-center items-center text-gray-800 hover:bg-gray-100 py-1 px-2.5 text-sm rounded-md focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">2</button>
<button type="button"
class="min-h-[32px] min-w-8 flex justify-center items-center text-gray-800 hover:bg-gray-100 py-1 px-2.5 text-sm rounded-md focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">3</button>
<div class="hs-tooltip ti-main-tooltip">
<button type="button"
class="hs-tooltip-toggle group min-h-[32px] min-w-8 flex justify-center items-center text-gray-400 hover:text-primary p-2 text-sm rounded-md focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:text-primary dark:focus:bg-white/10">
<span class="group-hover:hidden text-xs">•••</span>
<svg class="group-hover:block hidden flex-shrink-0 size-5" xmlns="http://www.w3.org/2000/svg"
width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="m6 17 5-5-5-5" />
<path d="m13 17 5-5-5-5" />
</svg>
<span
class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 !bg-black text-xs font-medium text-white shadow-sm dark:bg-bodybg"
role="tooltip">
Next 4 pages
</span>
</button>
</div>
<button type="button"
class="min-h-[32px] min-w-8 flex justify-center items-center text-gray-800 hover:bg-gray-100 py-1 px-2.5 text-sm rounded-md focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">8</button>
</div>
<button type="button"
class="min-h-[32px] min-w-8 py-2 px-2.5 inline-flex jusify-center items-center gap-x-2 text-sm rounded-md text-gray-800 hover:bg-gray-100 focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">
<span aria-hidden="true" class="sr-only">Next</span>
<svg class="flex-shrink-0 size-3.5 rtl:rotate-[180deg]" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="m9 18 6-6-6-6" />
</svg>
</button>
</nav>
<!-- End Pagination -->
<div class="sm:flex justify-center items-center gap-x-5 text-center space-y-2 sm:space-y-0">
<!-- Dropdown -->
<div class="hs-dropdown ti-dropdown [--placement:top-left]">
<button id="hs-pagination-dropdown-basic" type="button"
class="hs-dropdown-toggle !py-1 !px-2.5 ti-dropdown-toggle">
5 page
<svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="m6 9 6 6 6-6" />
</svg>
</button>
<div class="hs-dropdown-menu ti-dropdown-menu" aria-labelledby="hs-pagination-dropdown-basic">
<button type="button" class="ti-dropdown-item w-full justify-between">
5 page
<i class="ri-check-line text-primary flex-shrink-0 size-4"></i>
</button>
<button type="button" class="ti-dropdown-item w-full">
8 page
</button>
<button type="button" class="ti-dropdown-item w-full">
10 page
</button>
</div>
</div>
<!-- End Dropdown -->
<!-- Go To Page -->
<div class="flex justify-center sm:justify-start items-center gap-x-2">
<span class="text-sm text-gray-800 whitespace-nowrap dark:text-white">
Go to
</span>
<input type="number"
class="min-h-[32px] py-1 px-2.5 block w-12 border-gray-200 rounded-md text-sm text-center focus:border-primary focus:ring-primary [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-gray-400 dark:focus:ring-gray-600"
style="-moz-appearance: textfield;">
<span class="text-sm text-gray-800 whitespace-nowrap dark:text-white">
page
</span>
</div>
<!-- End Go To Page -->
</div>
</div>
<!-- End Pagination Wrapper -->
<!-- Pagination Wrapper -->
<div class="grid justify-center sm:flex sm:justify-start sm:items-center gap-2">
<!-- Pagination Wrapper -->
<nav class="flex items-center gap-x-1">
<button type="button"
class="min-h-[38px] min-w-[38px] py-2 px-2.5 inline-flex jusify-center items-center gap-x-2 text-sm rounded-md text-gray-800 hover:bg-gray-100 focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">
<svg class="flex-shrink-0 size-3.5 rtl:rotate-[180deg]" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="m15 18-6-6 6-6" />
</svg>
<span aria-hidden="true" class="sr-only">Previous</span>
</button>
<div class="flex items-center gap-x-1">
<button type="button"
class="min-h-[38px] min-w-[38px] flex justify-center items-center bg-primary text-white py-1 px-2.5 text-sm rounded-md focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:bg-primary dark:text-white dark:focus:bg-gray-500"
aria-current="page">1</button>
<button type="button"
class="min-h-[38px] min-w-[38px] flex justify-center items-center text-gray-800 hover:bg-gray-100 py-1 px-2.5 text-sm rounded-md focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">2</button>
<button type="button"
class="min-h-[38px] min-w-[38px] flex justify-center items-center text-gray-800 hover:bg-gray-100 py-1 px-2.5 text-sm rounded-md focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">3</button>
<div class="hs-tooltip ti-main-tooltip">
<button type="button"
class="hs-tooltip-toggle group min-h-[38px] min-w-[38px] flex justify-center items-center text-gray-400 hover:text-primary p-2 text-sm rounded-md focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:text-primary dark:focus:bg-white/10">
<span class="group-hover:hidden text-xs">•••</span>
<svg class="group-hover:block hidden flex-shrink-0 size-5" xmlns="http://www.w3.org/2000/svg"
width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="m6 17 5-5-5-5" />
<path d="m13 17 5-5-5-5" />
</svg>
<span
class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 !bg-black text-xs font-medium text-white shadow-sm dark:bg-bodybg"
role="tooltip">
Next 4 pages
</span>
</button>
</div>
<button type="button"
class="min-h-[38px] min-w-[38px] flex justify-center items-center text-gray-800 hover:bg-gray-100 py-1 px-2.5 text-sm rounded-md focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">8</button>
</div>
<button type="button"
class="min-h-[38px] min-w-[38px] py-2 px-2.5 inline-flex jusify-center items-center gap-x-2 text-sm rounded-md text-gray-800 hover:bg-gray-100 focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">
<span aria-hidden="true" class="sr-only">Next</span>
<svg class="flex-shrink-0 size-3.5 rtl:rotate-[180deg]" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="m9 18 6-6-6-6" />
</svg>
</button>
</nav>
<!-- End Pagination -->
<div class="sm:flex justify-center items-center gap-x-5 text-center space-y-2 sm:space-y-0">
<!-- Dropdown -->
<div class="hs-dropdown ti-dropdown [--placement:top-left]">
<button id="hs-pagination-dropdown-basic1" type="button"
class="hs-dropdown-toggle !py-2 !px-2.5 ti-dropdown-toggle">
5 page
<svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="m6 9 6 6 6-6" />
</svg>
</button>
<div class="hs-dropdown-menu ti-dropdown-menu" aria-labelledby="hs-pagination-dropdown-basic1">
<button type="button" class="ti-dropdown-item w-full justify-between">
5 page
<i class="ri-check-line text-primary flex-shrink-0 size-4"></i>
</button>
<button type="button" class="ti-dropdown-item w-full">
8 page
</button>
<button type="button" class="ti-dropdown-item w-full">
10 page
</button>
</div>
</div>
<!-- End Dropdown -->
<!-- Go To Page -->
<div class="flex justify-center sm:justify-start items-center gap-x-2">
<span class="text-sm text-gray-800 whitespace-nowrap dark:text-white">
Go to
</span>
<input type="number"
class="min-h-[38px] py-2 px-2.5 block w-12 border-gray-200 rounded-md text-sm text-center focus:border-primary focus:ring-primary [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-gray-400 dark:focus:ring-gray-600"
style="-moz-appearance: textfield;">
<span class="text-sm text-gray-800 whitespace-nowrap dark:text-white">
page
</span>
</div>
<!-- End Go To Page -->
</div>
</div>
<!-- End Pagination Wrapper -->
<!-- Pagination Wrapper -->
<div class="grid justify-center sm:flex sm:justify-start sm:items-center gap-2">
<!-- Pagination Wrapper -->
<nav class="flex items-center gap-x-1">
<button type="button"
class="min-h-[46px] min-w-[46px] py-2 px-2.5 inline-flex jusify-center items-center gap-x-2 text-sm rounded-md text-gray-800 hover:bg-gray-100 focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">
<svg class="flex-shrink-0 size-3.5 rtl:rotate-[180deg]" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="m15 18-6-6 6-6" />
</svg>
<span aria-hidden="true" class="sr-only">Previous</span>
</button>
<div class="flex items-center gap-x-1">
<button type="button"
class="min-h-[46px] min-w-[46px] flex justify-center items-center bg-primary text-white py-1 px-2.5 text-sm rounded-md focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:bg-primary dark:text-white dark:focus:bg-gray-500"
aria-current="page">1</button>
<button type="button"
class="min-h-[46px] min-w-[46px] flex justify-center items-center text-gray-800 hover:bg-gray-100 py-1 px-2.5 text-sm rounded-md focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">2</button>
<button type="button"
class="min-h-[46px] min-w-[46px] flex justify-center items-center text-gray-800 hover:bg-gray-100 py-1 px-2.5 text-sm rounded-md focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">3</button>
<div class="hs-tooltip ti-main-tooltip">
<button type="button"
class="hs-tooltip-toggle group min-h-[46px] min-w-[46px] flex justify-center items-center text-gray-400 hover:text-primary p-2 text-sm rounded-md focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:text-primary dark:focus:bg-white/10">
<span class="group-hover:hidden text-xs">•••</span>
<svg class="group-hover:block hidden flex-shrink-0 size-5" xmlns="http://www.w3.org/2000/svg"
width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="m6 17 5-5-5-5" />
<path d="m13 17 5-5-5-5" />
</svg>
<span
class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 !bg-black text-xs font-medium text-white shadow-sm dark:bg-bodybg"
role="tooltip">
Next 4 pages
</span>
</button>
</div>
<button type="button"
class="min-h-[46px] min-w-[46px] flex justify-center items-center text-gray-800 hover:bg-gray-100 py-1 px-2.5 text-sm rounded-md focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">8</button>
</div>
<button type="button"
class="min-h-[46px] min-w-[46px] py-2 px-2.5 inline-flex jusify-center items-center gap-x-2 text-sm rounded-md text-gray-800 hover:bg-gray-100 focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">
<span aria-hidden="true" class="sr-only">Next</span>
<svg class="flex-shrink-0 size-3.5 rtl:rotate-[180deg]" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="m9 18 6-6-6-6" />
</svg>
</button>
</nav>
<!-- End Pagination -->
<div class="sm:flex justify-center items-center gap-x-5 text-center space-y-2 sm:space-y-0">
<!-- Dropdown -->
<div class="hs-dropdown ti-dropdown [--placement:top-left]">
<button id="hs-pagination-dropdown-basic2" type="button"
class="hs-dropdown-toggle !py-3 !px-3.5 ti-dropdown-toggle">
5 page
<svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="m6 9 6 6 6-6" />
</svg>
</button>
<div class="hs-dropdown-menu ti-dropdown-menu" aria-labelledby="hs-pagination-dropdown-basic2">
<button type="button" class="ti-dropdown-item w-full justify-between">
5 page
<i class="ri-check-line text-primary flex-shrink-0 size-4"></i>
</button>
<button type="button" class="ti-dropdown-item w-full">
8 page
</button>
<button type="button" class="ti-dropdown-item w-full">
10 page
</button>
</div>
</div>
<!-- End Dropdown -->
<!-- Go To Page -->
<div class="flex justify-center sm:justify-start items-center gap-x-2">
<span class="text-sm text-gray-800 whitespace-nowrap dark:text-white">
Go to
</span>
<input type="number"
class="min-h-[46px] p-3 block w-12 border-gray-200 rounded-md text-sm text-center focus:border-primary focus:ring-primary [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-gray-400 dark:focus:ring-gray-600"
style="-moz-appearance: textfield;">
<span class="text-sm text-gray-800 whitespace-nowrap dark:text-white">
page
</span>
</div>
<!-- End Go To Page -->
</div>
</div>
<!-- End Pagination Wrapper -->Pagination Style 10
Go to
page
Go to
page
Go to
page
<div class="grid justify-center sm:flex sm:justify-start sm:items-center gap-2">
<!-- Pagination Wrapper -->
<nav class="flex items-center gap-x-1">
<button type="button"
class="min-h-[32px] min-w-8 py-2 px-2.5 inline-flex jusify-center items-center gap-x-2 text-sm rounded-full text-gray-800 hover:bg-gray-100 focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">
<svg class="flex-shrink-0 size-3.5 rtl:rotate-[180deg]" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="m15 18-6-6 6-6" />
</svg>
<span aria-hidden="true" class="sr-only">Previous</span>
</button>
<div class="flex items-center gap-x-1">
<button type="button"
class="min-h-[32px] min-w-8 flex justify-center items-center bg-primary text-white py-1 px-2.5 text-sm rounded-full focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:bg-primary dark:text-white dark:focus:bg-gray-500"
aria-current="page">1</button>
<button type="button"
class="min-h-[32px] min-w-8 flex justify-center items-center text-gray-800 hover:bg-gray-100 py-1 px-2.5 text-sm rounded-full focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">2</button>
<button type="button"
class="min-h-[32px] min-w-8 flex justify-center items-center text-gray-800 hover:bg-gray-100 py-1 px-2.5 text-sm rounded-full focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">3</button>
<div class="hs-tooltip ti-main-tooltip">
<button type="button"
class="hs-tooltip-toggle group min-h-[32px] min-w-8 flex justify-center items-center text-gray-400 hover:text-primary p-2 text-sm rounded-full focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:text-primary dark:focus:bg-white/10">
<span class="group-hover:hidden text-xs">•••</span>
<svg class="group-hover:block hidden flex-shrink-0 size-5" xmlns="http://www.w3.org/2000/svg"
width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="m6 17 5-5-5-5" />
<path d="m13 17 5-5-5-5" />
</svg>
<span
class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 !bg-black text-xs font-medium text-white shadow-sm dark:bg-bodybg"
role="tooltip">
Next 4 pages
</span>
</button>
</div>
<button type="button"
class="min-h-[32px] min-w-8 flex justify-center items-center text-gray-800 hover:bg-gray-100 py-1 px-2.5 text-sm rounded-full focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">8</button>
</div>
<button type="button"
class="min-h-[32px] min-w-8 py-2 px-2.5 inline-flex jusify-center items-center gap-x-2 text-sm rounded-full text-gray-800 hover:bg-gray-100 focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">
<span aria-hidden="true" class="sr-only">Next</span>
<svg class="flex-shrink-0 size-3.5 rtl:rotate-[180deg]" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="m9 18 6-6-6-6" />
</svg>
</button>
</nav>
<!-- End Pagination -->
<div class="sm:flex justify-center items-center gap-x-5 text-center space-y-2 sm:space-y-0">
<!-- Dropdown -->
<div class="hs-dropdown ti-dropdown [--placement:top-left]">
<button id="hs-pagination-dropdown-rounded" type="button"
class="hs-dropdown-toggle !py-1 !px-2.5 ti-dropdown-toggle">
5 page
<svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="m6 9 6 6 6-6" />
</svg>
</button>
<div class="hs-dropdown-menu ti-dropdown-menu" aria-labelledby="hs-pagination-dropdown-rounded">
<button type="button" class="ti-dropdown-item w-full justify-between">
5 page
<i class="ri-check-line text-primary flex-shrink-0 size-4"></i>
</button>
<button type="button" class="ti-dropdown-item w-full">
8 page
</button>
<button type="button" class="ti-dropdown-item w-full">
10 page
</button>
</div>
</div>
<!-- End Dropdown -->
<!-- Go To Page -->
<div class="flex justify-center sm:justify-start items-center gap-x-2">
<span class="text-sm text-gray-800 whitespace-nowrap dark:text-white">
Go to
</span>
<input type="number"
class="min-h-[32px] py-1 px-2.5 block w-12 border-gray-200 rounded-md text-sm text-center focus:border-primary focus:ring-primary [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-gray-400 dark:focus:ring-gray-600"
style="-moz-appearance: textfield;">
<span class="text-sm text-gray-800 whitespace-nowrap dark:text-white">
page
</span>
</div>
<!-- End Go To Page -->
</div>
</div>
<!-- End Pagination Wrapper -->
<!-- Pagination Wrapper -->
<div class="grid justify-center sm:flex sm:justify-start sm:items-center gap-2">
<!-- Pagination Wrapper -->
<nav class="flex items-center gap-x-1">
<button type="button"
class="min-h-[38px] min-w-[38px] py-2 px-2.5 inline-flex jusify-center items-center gap-x-2 text-sm rounded-full text-gray-800 hover:bg-gray-100 focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">
<svg class="flex-shrink-0 size-3.5 rtl:rotate-[180deg]" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="m15 18-6-6 6-6" />
</svg>
<span aria-hidden="true" class="sr-only">Previous</span>
</button>
<div class="flex items-center gap-x-1">
<button type="button"
class="min-h-[38px] min-w-[38px] flex justify-center items-center bg-primary text-white py-1 px-2.5 text-sm rounded-full focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:bg-primary dark:text-white dark:focus:bg-gray-500"
aria-current="page">1</button>
<button type="button"
class="min-h-[38px] min-w-[38px] flex justify-center items-center text-gray-800 hover:bg-gray-100 py-1 px-2.5 text-sm rounded-full focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">2</button>
<button type="button"
class="min-h-[38px] min-w-[38px] flex justify-center items-center text-gray-800 hover:bg-gray-100 py-1 px-2.5 text-sm rounded-full focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">3</button>
<div class="hs-tooltip ti-main-tooltip">
<button type="button"
class="hs-tooltip-toggle group min-h-[38px] min-w-[38px] flex justify-center items-center text-gray-400 hover:text-primary p-2 text-sm rounded-full focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:text-primary dark:focus:bg-white/10">
<span class="group-hover:hidden text-xs">•••</span>
<svg class="group-hover:block hidden flex-shrink-0 size-5" xmlns="http://www.w3.org/2000/svg"
width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="m6 17 5-5-5-5" />
<path d="m13 17 5-5-5-5" />
</svg>
<span
class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 !bg-black text-xs font-medium text-white shadow-sm dark:bg-bodybg"
role="tooltip">
Next 4 pages
</span>
</button>
</div>
<button type="button"
class="min-h-[38px] min-w-[38px] flex justify-center items-center text-gray-800 hover:bg-gray-100 py-1 px-2.5 text-sm rounded-full focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">8</button>
</div>
<button type="button"
class="min-h-[38px] min-w-[38px] py-2 px-2.5 inline-flex jusify-center items-center gap-x-2 text-sm rounded-full text-gray-800 hover:bg-gray-100 focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">
<span aria-hidden="true" class="sr-only">Next</span>
<svg class="flex-shrink-0 size-3.5 rtl:rotate-[180deg]" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="m9 18 6-6-6-6" />
</svg>
</button>
</nav>
<!-- End Pagination -->
<div class="sm:flex justify-center items-center gap-x-5 text-center space-y-2 sm:space-y-0">
<!-- Dropdown -->
<div class="hs-dropdown ti-dropdown [--placement:top-left]">
<button id="hs-pagination-dropdown-rounded1" type="button"
class="hs-dropdown-toggle !py-2 !px-2.5 ti-dropdown-toggle">
5 page
<svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="m6 9 6 6 6-6" />
</svg>
</button>
<div class="hs-dropdown-menu ti-dropdown-menu" aria-labelledby="hs-pagination-dropdown-rounded1">
<button type="button" class="ti-dropdown-item w-full justify-between">
5 page
<i class="ri-check-line text-primary flex-shrink-0 size-4"></i>
</button>
<button type="button" class="ti-dropdown-item w-full">
8 page
</button>
<button type="button" class="ti-dropdown-item w-full">
10 page
</button>
</div>
</div>
<!-- End Dropdown -->
<!-- Go To Page -->
<div class="flex justify-center sm:justify-start items-center gap-x-2">
<span class="text-sm text-gray-800 whitespace-nowrap dark:text-white">
Go to
</span>
<input type="number"
class="min-h-[38px] py-2 px-2.5 block w-12 border-gray-200 rounded-md text-sm text-center focus:border-primary focus:ring-primary [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-gray-400 dark:focus:ring-gray-600"
style="-moz-appearance: textfield;">
<span class="text-sm text-gray-800 whitespace-nowrap dark:text-white">
page
</span>
</div>
<!-- End Go To Page -->
</div>
</div>
<!-- End Pagination Wrapper -->
<!-- Pagination Wrapper -->
<div class="grid justify-center sm:flex sm:justify-start sm:items-center gap-2">
<!-- Pagination Wrapper -->
<nav class="flex items-center gap-x-1">
<button type="button"
class="min-h-[46px] min-w-[46px] py-2 px-2.5 inline-flex jusify-center items-center gap-x-2 text-sm rounded-full text-gray-800 hover:bg-gray-100 focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">
<svg class="flex-shrink-0 size-3.5 rtl:rotate-[180deg]" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="m15 18-6-6 6-6" />
</svg>
<span aria-hidden="true" class="sr-only">Previous</span>
</button>
<div class="flex items-center gap-x-1">
<button type="button"
class="min-h-[46px] min-w-[46px] flex justify-center items-center bg-primary text-white py-1 px-2.5 text-sm rounded-full focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:bg-primary dark:text-white dark:focus:bg-gray-500"
aria-current="page">1</button>
<button type="button"
class="min-h-[46px] min-w-[46px] flex justify-center items-center text-gray-800 hover:bg-gray-100 py-1 px-2.5 text-sm rounded-full focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">2</button>
<button type="button"
class="min-h-[46px] min-w-[46px] flex justify-center items-center text-gray-800 hover:bg-gray-100 py-1 px-2.5 text-sm rounded-full focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">3</button>
<div class="hs-tooltip ti-main-tooltip">
<button type="button"
class="hs-tooltip-toggle group min-h-[46px] min-w-[46px] flex justify-center items-center text-gray-400 hover:text-primary p-2 text-sm rounded-full focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:text-primary dark:focus:bg-white/10">
<span class="group-hover:hidden text-xs">•••</span>
<svg class="group-hover:block hidden flex-shrink-0 size-5" xmlns="http://www.w3.org/2000/svg"
width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="m6 17 5-5-5-5" />
<path d="m13 17 5-5-5-5" />
</svg>
<span
class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 !bg-black text-xs font-medium text-white shadow-sm dark:bg-bodybg"
role="tooltip">
Next 4 pages
</span>
</button>
</div>
<button type="button"
class="min-h-[46px] min-w-[46px] flex justify-center items-center text-gray-800 hover:bg-gray-100 py-1 px-2.5 text-sm rounded-full focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">8</button>
</div>
<button type="button"
class="min-h-[46px] min-w-[46px] py-2 px-2.5 inline-flex jusify-center items-center gap-x-2 text-sm rounded-full text-gray-800 hover:bg-gray-100 focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">
<span aria-hidden="true" class="sr-only">Next</span>
<svg class="flex-shrink-0 size-3.5 rtl:rotate-[180deg]" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="m9 18 6-6-6-6" />
</svg>
</button>
</nav>
<!-- End Pagination -->
<div class="sm:flex justify-center items-center gap-x-5 text-center space-y-2 sm:space-y-0">
<!-- Dropdown -->
<div class="hs-dropdown ti-dropdown [--placement:top-left]">
<button id="hs-pagination-dropdown-rounded2" type="button"
class="hs-dropdown-toggle !py-3 !px-3.5 ti-dropdown-toggle">
5 page
<svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="m6 9 6 6 6-6" />
</svg>
</button>
<div class="hs-dropdown-menu ti-dropdown-menu" aria-labelledby="hs-pagination-dropdown-rounded2">
<button type="button" class="ti-dropdown-item w-full justify-between">
5 page
<i class="ri-check-line text-primary flex-shrink-0 size-4"></i>
</button>
<button type="button" class="ti-dropdown-item w-full">
8 page
</button>
<button type="button" class="ti-dropdown-item w-full">
10 page
</button>
</div>
</div>
<!-- End Dropdown -->
<!-- Go To Page -->
<div class="flex justify-center sm:justify-start items-center gap-x-2">
<span class="text-sm text-gray-800 whitespace-nowrap dark:text-white">
Go to
</span>
<input type="number"
class="min-h-[46px] p-3 block w-12 border-gray-200 rounded-md text-sm text-center focus:border-primary focus:ring-primary [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-gray-400 dark:focus:ring-gray-600"
style="-moz-appearance: textfield;">
<span class="text-sm text-gray-800 whitespace-nowrap dark:text-white">
page
</span>
</div>
<!-- End Go To Page -->
</div>
</div>
Pagination Style 11
Go to
page
Go to
page
Go to
page
<div class="grid justify-center sm:flex sm:justify-start sm:items-center gap-2">
<!-- Pagination Wrapper -->
<nav class="flex items-center gap-x-1">
<button type="button"
class="min-h-[32px] min-w-8 py-2 px-2.5 inline-flex jusify-center items-center gap-x-2 text-sm rounded-md text-gray-800 hover:bg-gray-100 focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">
<svg class="flex-shrink-0 size-3.5 rtl:rotate-[180deg]" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="m15 18-6-6 6-6" />
</svg>
<span aria-hidden="true" class="sr-only">Previous</span>
</button>
<div class="flex items-center gap-x-1">
<button type="button"
class="min-h-[32px] min-w-8 flex justify-center items-center border border-primary text-primary py-1 px-2.5 text-sm rounded-md focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:border-primary dark:text-primary dark:focus:bg-gray-500"
aria-current="page">1</button>
<button type="button"
class="min-h-[32px] min-w-8 flex justify-center items-center text-gray-800 hover:bg-gray-100 py-1 px-2.5 text-sm rounded-md focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">2</button>
<button type="button"
class="min-h-[32px] min-w-8 flex justify-center items-center text-gray-800 hover:bg-gray-100 py-1 px-2.5 text-sm rounded-md focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">3</button>
<div class="hs-tooltip ti-main-tooltip">
<button type="button"
class="hs-tooltip-toggle group min-h-[32px] min-w-8 flex justify-center items-center text-gray-400 hover:text-primary p-2 text-sm rounded-md focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:text-primary dark:focus:bg-white/10">
<span class="group-hover:hidden text-xs">•••</span>
<svg class="group-hover:block hidden flex-shrink-0 size-5" xmlns="http://www.w3.org/2000/svg"
width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="m6 17 5-5-5-5" />
<path d="m13 17 5-5-5-5" />
</svg>
<span
class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 !bg-black text-xs font-medium text-white shadow-sm dark:bg-bodybg"
role="tooltip">
Next 4 pages
</span>
</button>
</div>
<button type="button"
class="min-h-[32px] min-w-8 flex justify-center items-center text-gray-800 hover:bg-gray-100 py-1 px-2.5 text-sm rounded-md focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">8</button>
</div>
<button type="button"
class="min-h-[32px] min-w-8 py-2 px-2.5 inline-flex jusify-center items-center gap-x-2 text-sm rounded-md text-gray-800 hover:bg-gray-100 focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">
<span aria-hidden="true" class="sr-only">Next</span>
<svg class="flex-shrink-0 size-3.5 rtl:rotate-[180deg]" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="m9 18 6-6-6-6" />
</svg>
</button>
</nav>
<!-- End Pagination -->
<div class="sm:flex justify-center items-center gap-x-5 text-center space-y-2 sm:space-y-0">
<!-- Dropdown -->
<div class="hs-dropdown ti-dropdown [--placement:top-left]">
<button id="hs-pagination-dropdown-bordered" type="button"
class="hs-dropdown-toggle !py-1 !px-2.5 ti-dropdown-toggle">
5 page
<svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="m6 9 6 6 6-6" />
</svg>
</button>
<div class="hs-dropdown-menu ti-dropdown-menu" aria-labelledby="hs-pagination-dropdown-bordered">
<button type="button" class="ti-dropdown-item w-full justify-between">
5 page
<i class="ri-check-line text-primary flex-shrink-0 size-4"></i>
</button>
<button type="button" class="ti-dropdown-item w-full">
8 page
</button>
<button type="button" class="ti-dropdown-item w-full">
10 page
</button>
</div>
</div>
<!-- End Dropdown -->
<!-- Go To Page -->
<div class="flex justify-center sm:justify-start items-center gap-x-2">
<span class="text-sm text-gray-800 whitespace-nowrap dark:text-white">
Go to
</span>
<input type="number"
class="min-h-[32px] py-1 px-2.5 block w-12 border-gray-200 rounded-md text-sm text-center focus:border-primary focus:ring-primary [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-gray-400 dark:focus:ring-gray-600"
style="-moz-appearance: textfield;">
<span class="text-sm text-gray-800 whitespace-nowrap dark:text-white">
page
</span>
</div>
<!-- End Go To Page -->
</div>
</div>
<!-- End Pagination Wrapper -->
<!-- Pagination Wrapper -->
<div class="grid justify-center sm:flex sm:justify-start sm:items-center gap-2">
<!-- Pagination Wrapper -->
<nav class="flex items-center gap-x-1">
<button type="button"
class="min-h-[38px] min-w-[38px] py-2 px-2.5 inline-flex jusify-center items-center gap-x-2 text-sm rounded-md text-gray-800 hover:bg-gray-100 focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">
<svg class="flex-shrink-0 size-3.5 rtl:rotate-[180deg]" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="m15 18-6-6 6-6" />
</svg>
<span aria-hidden="true" class="sr-only">Previous</span>
</button>
<div class="flex items-center gap-x-1">
<button type="button"
class="min-h-[38px] min-w-[38px] flex justify-center items-center border border-primary text-primary py-1 px-2.5 text-sm rounded-md focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:border-primary dark:text-primary dark:focus:bg-gray-500"
aria-current="page">1</button>
<button type="button"
class="min-h-[38px] min-w-[38px] flex justify-center items-center text-gray-800 hover:bg-gray-100 py-1 px-2.5 text-sm rounded-md focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">2</button>
<button type="button"
class="min-h-[38px] min-w-[38px] flex justify-center items-center text-gray-800 hover:bg-gray-100 py-1 px-2.5 text-sm rounded-md focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">3</button>
<div class="hs-tooltip ti-main-tooltip">
<button type="button"
class="hs-tooltip-toggle group min-h-[38px] min-w-[38px] flex justify-center items-center text-gray-400 hover:text-primary p-2 text-sm rounded-md focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:text-primary dark:focus:bg-white/10">
<span class="group-hover:hidden text-xs">•••</span>
<svg class="group-hover:block hidden flex-shrink-0 size-5" xmlns="http://www.w3.org/2000/svg"
width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="m6 17 5-5-5-5" />
<path d="m13 17 5-5-5-5" />
</svg>
<span
class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 !bg-black text-xs font-medium text-white shadow-sm dark:bg-bodybg"
role="tooltip">
Next 4 pages
</span>
</button>
</div>
<button type="button"
class="min-h-[38px] min-w-[38px] flex justify-center items-center text-gray-800 hover:bg-gray-100 py-1 px-2.5 text-sm rounded-md focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">8</button>
</div>
<button type="button"
class="min-h-[38px] min-w-[38px] py-2 px-2.5 inline-flex jusify-center items-center gap-x-2 text-sm rounded-md text-gray-800 hover:bg-gray-100 focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">
<span aria-hidden="true" class="sr-only">Next</span>
<svg class="flex-shrink-0 size-3.5 rtl:rotate-[180deg]" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="m9 18 6-6-6-6" />
</svg>
</button>
</nav>
<!-- End Pagination -->
<div class="sm:flex justify-center items-center gap-x-5 text-center space-y-2 sm:space-y-0">
<!-- Dropdown -->
<div class="hs-dropdown ti-dropdown [--placement:top-left]">
<button id="hs-pagination-dropdown-bordered1" type="button"
class="hs-dropdown-toggle !py-2 !px-2.5 ti-dropdown-toggle">
5 page
<svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="m6 9 6 6 6-6" />
</svg>
</button>
<div class="hs-dropdown-menu ti-dropdown-menu" aria-labelledby="hs-pagination-dropdown-bordered1">
<button type="button" class="ti-dropdown-item w-full justify-between">
5 page
<i class="ri-check-line text-primary flex-shrink-0 size-4"></i>
</button>
<button type="button" class="ti-dropdown-item w-full">
8 page
</button>
<button type="button" class="ti-dropdown-item w-full">
10 page
</button>
</div>
</div>
<!-- End Dropdown -->
<!-- Go To Page -->
<div class="flex justify-center sm:justify-start items-center gap-x-2">
<span class="text-sm text-gray-800 whitespace-nowrap dark:text-white">
Go to
</span>
<input type="number"
class="min-h-[38px] py-2 px-2.5 block w-12 border-gray-200 rounded-md text-sm text-center focus:border-primary focus:ring-primary [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-gray-400 dark:focus:ring-gray-600"
style="-moz-appearance: textfield;">
<span class="text-sm text-gray-800 whitespace-nowrap dark:text-white">
page
</span>
</div>
<!-- End Go To Page -->
</div>
</div>
<!-- End Pagination Wrapper -->
<!-- Pagination Wrapper -->
<div class="grid justify-center sm:flex sm:justify-start sm:items-center gap-2">
<!-- Pagination Wrapper -->
<nav class="flex items-center gap-x-1">
<button type="button"
class="min-h-[46px] min-w-[46px] py-2 px-2.5 inline-flex jusify-center items-center gap-x-2 text-sm rounded-md text-gray-800 hover:bg-gray-100 focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">
<svg class="flex-shrink-0 size-3.5 rtl:rotate-[180deg]" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="m15 18-6-6 6-6" />
</svg>
<span aria-hidden="true" class="sr-only">Previous</span>
</button>
<div class="flex items-center gap-x-1">
<button type="button"
class="min-h-[46px] min-w-[46px] flex justify-center items-center border border-primary text-primary py-1 px-2.5 text-sm rounded-md focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:border-primary dark:text-primary dark:focus:bg-gray-500"
aria-current="page">1</button>
<button type="button"
class="min-h-[46px] min-w-[46px] flex justify-center items-center text-gray-800 hover:bg-gray-100 py-1 px-2.5 text-sm rounded-md focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">2</button>
<button type="button"
class="min-h-[46px] min-w-[46px] flex justify-center items-center text-gray-800 hover:bg-gray-100 py-1 px-2.5 text-sm rounded-md focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">3</button>
<div class="hs-tooltip ti-main-tooltip">
<button type="button"
class="hs-tooltip-toggle group min-h-[46px] min-w-[46px] flex justify-center items-center text-gray-400 hover:text-primary p-2 text-sm rounded-md focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:text-primary dark:focus:bg-white/10">
<span class="group-hover:hidden text-xs">•••</span>
<svg class="group-hover:block hidden flex-shrink-0 size-5" xmlns="http://www.w3.org/2000/svg"
width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="m6 17 5-5-5-5" />
<path d="m13 17 5-5-5-5" />
</svg>
<span
class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 !bg-black text-xs font-medium text-white shadow-sm dark:bg-bodybg"
role="tooltip">
Next 4 pages
</span>
</button>
</div>
<button type="button"
class="min-h-[46px] min-w-[46px] flex justify-center items-center text-gray-800 hover:bg-gray-100 py-1 px-2.5 text-sm rounded-md focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">8</button>
</div>
<button type="button"
class="min-h-[46px] min-w-[46px] py-2 px-2.5 inline-flex jusify-center items-center gap-x-2 text-sm rounded-md text-gray-800 hover:bg-gray-100 focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">
<span aria-hidden="true" class="sr-only">Next</span>
<svg class="flex-shrink-0 size-3.5 rtl:rotate-[180deg]" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="m9 18 6-6-6-6" />
</svg>
</button>
</nav>
<!-- End Pagination -->
<div class="sm:flex justify-center items-center gap-x-5 text-center space-y-2 sm:space-y-0">
<!-- Dropdown -->
<div class="hs-dropdown ti-dropdown [--placement:top-left]">
<button id="hs-pagination-dropdown-bordered2" type="button"
class="hs-dropdown-toggle !py-3 !px-3.5 ti-dropdown-toggle">
5 page
<svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="m6 9 6 6 6-6" />
</svg>
</button>
<div class="hs-dropdown-menu ti-dropdown-menu" aria-labelledby="hs-pagination-dropdown-bordered2">
<button type="button" class="ti-dropdown-item w-full justify-between">
5 page
<i class="ri-check-line text-primary flex-shrink-0 size-4"></i>
</button>
<button type="button" class="ti-dropdown-item w-full">
8 page
</button>
<button type="button" class="ti-dropdown-item w-full">
10 page
</button>
</div>
</div>
<!-- End Dropdown -->
<!-- Go To Page -->
<div class="flex justify-center sm:justify-start items-center gap-x-2">
<span class="text-sm text-gray-800 whitespace-nowrap dark:text-white">
Go to
</span>
<input type="number"
class="min-h-[46px] p-3 block w-12 border-gray-200 rounded-md text-sm text-center focus:border-primary focus:ring-primary [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-gray-400 dark:focus:ring-gray-600"
style="-moz-appearance: textfield;">
<span class="text-sm text-gray-800 whitespace-nowrap dark:text-white">
page
</span>
</div>
<!-- End Go To Page -->
</div>
</div>
Pagination Style 12
Go to
page
Go to
page
Go to
page
<div class="grid justify-center sm:flex sm:justify-start sm:items-center gap-2">
<!-- Pagination Wrapper -->
<nav class="flex items-center gap-x-1">
<button type="button"
class="min-h-[32px] min-w-8 py-2 px-2.5 inline-flex jusify-center items-center gap-x-2 text-sm rounded-full text-gray-800 hover:bg-gray-100 focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">
<svg class="flex-shrink-0 size-3.5 rtl:rotate-[180deg]" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="m15 18-6-6 6-6" />
</svg>
<span aria-hidden="true" class="sr-only">Previous</span>
</button>
<div class="flex items-center gap-x-1">
<button type="button"
class="min-h-[32px] min-w-8 flex justify-center items-center border border-primary text-primary py-1 px-2.5 text-sm rounded-full focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:border-primary dark:text-primary dark:focus:bg-gray-500"
aria-current="page">1</button>
<button type="button"
class="min-h-[32px] min-w-8 flex justify-center items-center text-gray-800 hover:bg-gray-100 py-1 px-2.5 text-sm rounded-full focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">2</button>
<button type="button"
class="min-h-[32px] min-w-8 flex justify-center items-center text-gray-800 hover:bg-gray-100 py-1 px-2.5 text-sm rounded-full focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">3</button>
<div class="hs-tooltip ti-main-tooltip">
<button type="button"
class="hs-tooltip-toggle group min-h-[32px] min-w-8 flex justify-center items-center text-gray-400 hover:text-primary p-2 text-sm rounded-full focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:text-primary dark:focus:bg-white/10">
<span class="group-hover:hidden text-xs">•••</span>
<svg class="group-hover:block hidden flex-shrink-0 size-5" xmlns="http://www.w3.org/2000/svg"
width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="m6 17 5-5-5-5" />
<path d="m13 17 5-5-5-5" />
</svg>
<span
class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 !bg-black text-xs font-medium text-white shadow-sm dark:bg-bodybg"
role="tooltip">
Next 4 pages
</span>
</button>
</div>
<button type="button"
class="min-h-[32px] min-w-8 flex justify-center items-center text-gray-800 hover:bg-gray-100 py-1 px-2.5 text-sm rounded-full focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">8</button>
</div>
<button type="button"
class="min-h-[32px] min-w-8 py-2 px-2.5 inline-flex jusify-center items-center gap-x-2 text-sm rounded-full text-gray-800 hover:bg-gray-100 focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">
<span aria-hidden="true" class="sr-only">Next</span>
<svg class="flex-shrink-0 size-3.5 rtl:rotate-[180deg]" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="m9 18 6-6-6-6" />
</svg>
</button>
</nav>
<!-- End Pagination -->
<div class="sm:flex justify-center items-center gap-x-5 text-center space-y-2 sm:space-y-0">
<!-- Dropdown -->
<div class="hs-dropdown ti-dropdown [--placement:top-left]">
<button id="hs-pagination-dropdown-bordered-round" type="button"
class="hs-dropdown-toggle !py-1 !px-2.5 ti-dropdown-toggle">
5 page
<svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="m6 9 6 6 6-6" />
</svg>
</button>
<div class="hs-dropdown-menu ti-dropdown-menu"
aria-labelledby="hs-pagination-dropdown-bordered-round">
<button type="button" class="ti-dropdown-item w-full justify-between">
5 page
<i class="ri-check-line text-primary flex-shrink-0 size-4"></i>
</button>
<button type="button" class="ti-dropdown-item w-full">
8 page
</button>
<button type="button" class="ti-dropdown-item w-full">
10 page
</button>
</div>
</div>
<!-- End Dropdown -->
<!-- Go To Page -->
<div class="flex justify-center sm:justify-start items-center gap-x-2">
<span class="text-sm text-gray-800 whitespace-nowrap dark:text-white">
Go to
</span>
<input type="number"
class="min-h-[32px] py-1 px-2.5 block w-12 border-gray-200 rounded-md text-sm text-center focus:border-primary focus:ring-primary [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-gray-400 dark:focus:ring-gray-600"
style="-moz-appearance: textfield;">
<span class="text-sm text-gray-800 whitespace-nowrap dark:text-white">
page
</span>
</div>
<!-- End Go To Page -->
</div>
</div>
<!-- End Pagination Wrapper -->
<!-- Pagination Wrapper -->
<div class="grid justify-center sm:flex sm:justify-start sm:items-center gap-2">
<!-- Pagination Wrapper -->
<nav class="flex items-center gap-x-1">
<button type="button"
class="min-h-[38px] min-w-[38px] py-2 px-2.5 inline-flex jusify-center items-center gap-x-2 text-sm rounded-full text-gray-800 hover:bg-gray-100 focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">
<svg class="flex-shrink-0 size-3.5 rtl:rotate-[180deg]" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="m15 18-6-6 6-6" />
</svg>
<span aria-hidden="true" class="sr-only">Previous</span>
</button>
<div class="flex items-center gap-x-1">
<button type="button"
class="min-h-[38px] min-w-[38px] flex justify-center items-center border border-primary text-primary py-1 px-2.5 text-sm rounded-full focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:border-primary dark:text-primary dark:focus:bg-gray-500"
aria-current="page">1</button>
<button type="button"
class="min-h-[38px] min-w-[38px] flex justify-center items-center text-gray-800 hover:bg-gray-100 py-1 px-2.5 text-sm rounded-full focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">2</button>
<button type="button"
class="min-h-[38px] min-w-[38px] flex justify-center items-center text-gray-800 hover:bg-gray-100 py-1 px-2.5 text-sm rounded-full focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">3</button>
<div class="hs-tooltip ti-main-tooltip">
<button type="button"
class="hs-tooltip-toggle group min-h-[38px] min-w-[38px] flex justify-center items-center text-gray-400 hover:text-primary p-2 text-sm rounded-full focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:text-primary dark:focus:bg-white/10">
<span class="group-hover:hidden text-xs">•••</span>
<svg class="group-hover:block hidden flex-shrink-0 size-5" xmlns="http://www.w3.org/2000/svg"
width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="m6 17 5-5-5-5" />
<path d="m13 17 5-5-5-5" />
</svg>
<span
class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 !bg-black text-xs font-medium text-white shadow-sm dark:bg-bodybg"
role="tooltip">
Next 4 pages
</span>
</button>
</div>
<button type="button"
class="min-h-[38px] min-w-[38px] flex justify-center items-center text-gray-800 hover:bg-gray-100 py-1 px-2.5 text-sm rounded-full focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">8</button>
</div>
<button type="button"
class="min-h-[38px] min-w-[38px] py-2 px-2.5 inline-flex jusify-center items-center gap-x-2 text-sm rounded-full text-gray-800 hover:bg-gray-100 focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">
<span aria-hidden="true" class="sr-only">Next</span>
<svg class="flex-shrink-0 size-3.5 rtl:rotate-[180deg]" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="m9 18 6-6-6-6" />
</svg>
</button>
</nav>
<!-- End Pagination -->
<div class="sm:flex justify-center items-center gap-x-5 text-center space-y-2 sm:space-y-0">
<!-- Dropdown -->
<div class="hs-dropdown ti-dropdown [--placement:top-left]">
<button id="hs-pagination-dropdown-bordered-round1" type="button"
class="hs-dropdown-toggle !py-2 !px-2.5 ti-dropdown-toggle">
5 page
<svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="m6 9 6 6 6-6" />
</svg>
</button>
<div class="hs-dropdown-menu ti-dropdown-menu"
aria-labelledby="hs-pagination-dropdown-bordered-round1">
<button type="button" class="ti-dropdown-item w-full justify-between">
5 page
<i class="ri-check-line text-primary flex-shrink-0 size-4"></i>
</button>
<button type="button" class="ti-dropdown-item w-full">
8 page
</button>
<button type="button" class="ti-dropdown-item w-full">
10 page
</button>
</div>
</div>
<!-- End Dropdown -->
<!-- Go To Page -->
<div class="flex justify-center sm:justify-start items-center gap-x-2">
<span class="text-sm text-gray-800 whitespace-nowrap dark:text-white">
Go to
</span>
<input type="number"
class="min-h-[38px] py-2 px-2.5 block w-12 border-gray-200 rounded-md text-sm text-center focus:border-primary focus:ring-primary [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-gray-400 dark:focus:ring-gray-600"
style="-moz-appearance: textfield;">
<span class="text-sm text-gray-800 whitespace-nowrap dark:text-white">
page
</span>
</div>
<!-- End Go To Page -->
</div>
</div>
<!-- End Pagination Wrapper -->
<!-- Pagination Wrapper -->
<div class="grid justify-center sm:flex sm:justify-start sm:items-center gap-2">
<!-- Pagination Wrapper -->
<nav class="flex items-center gap-x-1">
<button type="button"
class="min-h-[46px] min-w-[46px] py-2 px-2.5 inline-flex jusify-center items-center gap-x-2 text-sm rounded-full text-gray-800 hover:bg-gray-100 focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">
<svg class="flex-shrink-0 size-3.5 rtl:rotate-[180deg]" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="m15 18-6-6 6-6" />
</svg>
<span aria-hidden="true" class="sr-only">Previous</span>
</button>
<div class="flex items-center gap-x-1">
<button type="button"
class="min-h-[46px] min-w-[46px] flex justify-center items-center border border-primary text-primary py-1 px-2.5 text-sm rounded-full focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:border-primary dark:text-primary dark:focus:bg-gray-500"
aria-current="page">1</button>
<button type="button"
class="min-h-[46px] min-w-[46px] flex justify-center items-center text-gray-800 hover:bg-gray-100 py-1 px-2.5 text-sm rounded-full focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">2</button>
<button type="button"
class="min-h-[46px] min-w-[46px] flex justify-center items-center text-gray-800 hover:bg-gray-100 py-1 px-2.5 text-sm rounded-full focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">3</button>
<div class="hs-tooltip ti-main-tooltip">
<button type="button"
class="hs-tooltip-toggle group min-h-[46px] min-w-[46px] flex justify-center items-center text-gray-400 hover:text-primary p-2 text-sm rounded-full focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:text-primary dark:focus:bg-white/10">
<span class="group-hover:hidden text-xs">•••</span>
<svg class="group-hover:block hidden flex-shrink-0 size-5" xmlns="http://www.w3.org/2000/svg"
width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="m6 17 5-5-5-5" />
<path d="m13 17 5-5-5-5" />
</svg>
<span
class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 !bg-black text-xs font-medium text-white shadow-sm dark:bg-bodybg"
role="tooltip">
Next 4 pages
</span>
</button>
</div>
<button type="button"
class="min-h-[46px] min-w-[46px] flex justify-center items-center text-gray-800 hover:bg-gray-100 py-1 px-2.5 text-sm rounded-full focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">8</button>
</div>
<button type="button"
class="min-h-[46px] min-w-[46px] py-2 px-2.5 inline-flex jusify-center items-center gap-x-2 text-sm rounded-full text-gray-800 hover:bg-gray-100 focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">
<span aria-hidden="true" class="sr-only">Next</span>
<svg class="flex-shrink-0 size-3.5 rtl:rotate-[180deg]" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="m9 18 6-6-6-6" />
</svg>
</button>
</nav>
<!-- End Pagination -->
<div class="sm:flex justify-center items-center gap-x-5 text-center space-y-2 sm:space-y-0">
<!-- Dropdown -->
<div class="hs-dropdown ti-dropdown [--placement:top-left]">
<button id="hs-pagination-dropdown-bordered-round2" type="button"
class="hs-dropdown-toggle !py-3 !px-3.5 ti-dropdown-toggle">
5 page
<svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="m6 9 6 6 6-6" />
</svg>
</button>
<div class="hs-dropdown-menu ti-dropdown-menu"
aria-labelledby="hs-pagination-dropdown-bordered-round2">
<button type="button" class="ti-dropdown-item w-full justify-between">
5 page
<i class="ri-check-line text-primary flex-shrink-0 size-4"></i>
</button>
<button type="button" class="ti-dropdown-item w-full">
8 page
</button>
<button type="button" class="ti-dropdown-item w-full">
10 page
</button>
</div>
</div>
<!-- End Dropdown -->
<!-- Go To Page -->
<div class="flex justify-center sm:justify-start items-center gap-x-2">
<span class="text-sm text-gray-800 whitespace-nowrap dark:text-white">
Go to
</span>
<input type="number"
class="min-h-[46px] p-3 block w-12 border-gray-200 rounded-md text-sm text-center focus:border-primary focus:ring-primary [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-gray-400 dark:focus:ring-gray-600"
style="-moz-appearance: textfield;">
<span class="text-sm text-gray-800 whitespace-nowrap dark:text-white">
page
</span>
</div>
<!-- End Go To Page -->
</div>
</div>
Pagination Style 13
Go to
page
Go to
page
Go to
page
<div class="grid justify-center sm:flex sm:justify-start sm:items-center gap-2">
<!-- Pagination Wrapper -->
<nav class="flex items-center -space-x-px">
<button type="button"
class="min-h-[32px] min-w-8 py-2 px-2 inline-flex justify-center items-center gap-x-1.5 text-sm first:rounded-s-md last:rounded-e-md border border-gray-200 text-gray-800 hover:bg-gray-100 focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:border-white/10 dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">
<svg class="flex-shrink-0 size-3.5 rtl:rotate-[180deg]" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="m15 18-6-6 6-6" />
</svg>
<span aria-hidden="true" class="sr-only">Previous</span>
</button>
<button type="button"
class="min-h-[32px] min-w-8 flex justify-center items-center bg-primary text-white border border-gray-200 py-1 px-2.5 text-sm first:rounded-s-md last:rounded-e-md focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:bg-primary dark:border-white/10 dark:text-white dark:focus:bg-gray-500"
aria-current="page">1</button>
<button type="button"
class="min-h-[32px] min-w-8 flex justify-center items-center border border-gray-200 text-gray-800 hover:bg-gray-100 py-1 px-2.5 text-sm first:rounded-s-md last:rounded-e-md focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:border-white/10 dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">2</button>
<button type="button"
class="min-h-[32px] min-w-8 flex justify-center items-center border border-gray-200 text-gray-800 hover:bg-gray-100 py-1 px-2.5 text-sm first:rounded-s-md last:rounded-e-md focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:border-white/10 dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">3</button>
<div class="hs-tooltip ti-main-tooltip border border-gray-200 dark:border-white/10">
<button type="button"
class="hs-tooltip-toggle group min-h-[30px] min-w-8 flex justify-center items-center text-gray-400 hover:text-primary py-1 px-2.5 text-sm focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:text-primary dark:focus:bg-white/10">
<span class="group-hover:hidden text-xs">•••</span>
<svg class="group-hover:block hidden flex-shrink-0 size-5" xmlns="http://www.w3.org/2000/svg"
width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<path d="m6 17 5-5-5-5" />
<path d="m13 17 5-5-5-5" />
</svg>
<span
class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 !bg-black text-xs font-medium text-white shadow-sm dark:bg-bodybg"
role="tooltip">
Next 4 pages
</span>
</button>
</div>
<button type="button"
class="min-h-[32px] min-w-8 flex justify-center items-center border border-gray-200 text-gray-800 hover:bg-gray-100 py-1 px-2.5 text-sm first:rounded-s-md last:rounded-e-md focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:border-white/10 dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">8</button>
<button type="button"
class="min-h-[32px] min-w-8 py-1 px-2.5 inline-flex justify-center items-center gap-x-1.5 text-sm first:rounded-s-md last:rounded-e-md border border-gray-200 text-gray-800 hover:bg-gray-100 focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:border-white/10 dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">
<span aria-hidden="true" class="sr-only">Next</span>
<svg class="flex-shrink-0 size-3.5 rtl:rotate-[180deg]" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="m9 18 6-6-6-6" />
</svg>
</button>
</nav>
<!-- End Pagination -->
<div class="sm:flex justify-center items-center gap-x-5 text-center space-y-2 sm:space-y-0">
<!-- Dropdown -->
<div class="hs-dropdown ti-dropdown [--placement:top-left]">
<button id="hs-pagination-dropdown-bordered-group" type="button"
class="hs-dropdown-toggle !py-1 !px-2.5 ti-dropdown-toggle">
5 page
<svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="m6 9 6 6 6-6" />
</svg>
</button>
<div class="hs-dropdown-menu ti-dropdown-menu"
aria-labelledby="hs-pagination-dropdown-bordered-group">
<button type="button" class="ti-dropdown-item w-full justify-between">
5 page
<i class="ri-check-line text-primary flex-shrink-0 size-4"></i>
</button>
<button type="button" class="ti-dropdown-item w-full">
8 page
</button>
<button type="button" class="ti-dropdown-item w-full">
10 page
</button>
</div>
</div>
<!-- End Dropdown -->
<!-- Go To Page -->
<div class="flex justify-center sm:justify-start items-center gap-x-2">
<span class="text-sm text-gray-800 whitespace-nowrap dark:text-white">
Go to
</span>
<input type="number"
class="min-h-[32px] py-1 px-2.5 block w-12 border-gray-200 rounded-md text-sm text-center focus:border-primary focus:ring-primary [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-gray-400 dark:focus:ring-gray-600"
style="-moz-appearance: textfield;">
<span class="text-sm text-gray-800 whitespace-nowrap dark:text-white">
page
</span>
</div>
<!-- End Go To Page -->
</div>
</div>
<!-- End Pagination Wrapper -->
<!-- Pagination Wrapper -->
<div class="grid justify-center sm:flex sm:justify-start sm:items-center gap-2">
<!-- Pagination Wrapper -->
<nav class="flex items-center -space-x-px">
<button type="button"
class="min-h-[38px] min-w-[38px] py-2 px-2.5 inline-flex justify-center items-center gap-x-1.5 text-sm first:rounded-s-md last:rounded-e-md border border-gray-200 text-gray-800 hover:bg-gray-100 focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:border-white/10 dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">
<svg class="flex-shrink-0 size-3.5 rtl:rotate-[180deg]" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="m15 18-6-6 6-6" />
</svg>
<span aria-hidden="true" class="sr-only">Previous</span>
</button>
<button type="button"
class="min-h-[38px] min-w-[38px] flex justify-center items-center bg-primary text-white border border-gray-200 py-2 px-3 text-sm first:rounded-s-md last:rounded-e-md focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:bg-primary dark:border-white/10 dark:text-white dark:focus:bg-gray-500"
aria-current="page">1</button>
<button type="button"
class="min-h-[38px] min-w-[38px] flex justify-center items-center border border-gray-200 text-gray-800 hover:bg-gray-100 py-2 px-3 text-sm first:rounded-s-md last:rounded-e-md focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:border-white/10 dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">2</button>
<button type="button"
class="min-h-[38px] min-w-[38px] flex justify-center items-center border border-gray-200 text-gray-800 hover:bg-gray-100 py-2 px-3 text-sm first:rounded-s-md last:rounded-e-md focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:border-white/10 dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">3</button>
<div class="hs-tooltip ti-main-tooltip border border-gray-200 dark:border-white/10">
<button type="button"
class="hs-tooltip-toggle group min-h-[36px] min-w-[36px] flex justify-center items-center text-gray-400 hover:text-primary p-2 text-sm focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:text-primary dark:focus:bg-white/10">
<span class="group-hover:hidden text-xs">•••</span>
<svg class="group-hover:block hidden flex-shrink-0 size-5" xmlns="http://www.w3.org/2000/svg"
width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<path d="m6 17 5-5-5-5" />
<path d="m13 17 5-5-5-5" />
</svg>
<span
class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 !bg-black text-xs font-medium text-white shadow-sm dark:bg-bodybg"
role="tooltip">
Next 4 pages
</span>
</button>
</div>
<button type="button"
class="min-h-[38px] min-w-[38px] flex justify-center items-center border border-gray-200 text-gray-800 hover:bg-gray-100 py-2 px-3 text-sm first:rounded-s-md last:rounded-e-md focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:border-white/10 dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">8</button>
<button type="button"
class="min-h-[38px] min-w-[38px] py-2 px-2.5 inline-flex justify-center items-center gap-x-1.5 text-sm first:rounded-s-md last:rounded-e-md border border-gray-200 text-gray-800 hover:bg-gray-100 focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:border-white/10 dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">
<span aria-hidden="true" class="sr-only">Next</span>
<svg class="flex-shrink-0 size-3.5 rtl:rotate-[180deg]" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="m9 18 6-6-6-6" />
</svg>
</button>
</nav>
<!-- End Pagination -->
<div class="sm:flex justify-center items-center gap-x-5 text-center space-y-2 sm:space-y-0">
<!-- Dropdown -->
<div class="hs-dropdown ti-dropdown [--placement:top-left]">
<button id="hs-pagination-dropdown-bordered-group1" type="button"
class="hs-dropdown-toggle !py-2 !px-2.5 ti-dropdown-toggle">
5 page
<svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="m6 9 6 6 6-6" />
</svg>
</button>
<div class="hs-dropdown-menu ti-dropdown-menu"
aria-labelledby="hs-pagination-dropdown-bordered-group1">
<button type="button" class="ti-dropdown-item w-full justify-between">
5 page
<i class="ri-check-line text-primary flex-shrink-0 size-4"></i>
</button>
<button type="button" class="ti-dropdown-item w-full">
8 page
</button>
<button type="button" class="ti-dropdown-item w-full">
10 page
</button>
</div>
</div>
<!-- End Dropdown -->
<!-- Go To Page -->
<div class="flex justify-center sm:justify-start items-center gap-x-2">
<span class="text-sm text-gray-800 whitespace-nowrap dark:text-white">
Go to
</span>
<input type="number"
class="min-h-[32px] py-2 px-2.5 block w-12 border-gray-200 rounded-md text-sm text-center focus:border-primary focus:ring-primary [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-gray-400 dark:focus:ring-gray-600"
style="-moz-appearance: textfield;">
<span class="text-sm text-gray-800 whitespace-nowrap dark:text-white">
page
</span>
</div>
<!-- End Go To Page -->
</div>
</div>
<!-- End Pagination Wrapper -->
<!-- Pagination Wrapper -->
<div class="grid justify-center sm:flex sm:justify-start sm:items-center gap-2">
<!-- Pagination Wrapper -->
<nav class="flex items-center -space-x-px">
<button type="button"
class="min-h-[46px] min-w-[46px] py-2 px-2.5 inline-flex justify-center items-center gap-x-1.5 text-sm first:rounded-s-md last:rounded-e-md border border-gray-200 text-gray-800 hover:bg-gray-100 focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:border-white/10 dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">
<svg class="flex-shrink-0 size-3.5 rtl:rotate-[180deg]" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="m15 18-6-6 6-6" />
</svg>
<span aria-hidden="true" class="sr-only">Previous</span>
</button>
<button type="button"
class="min-h-[46px] min-w-[46px] flex justify-center items-center bg-primary text-white border border-gray-200 py-2 px-3 text-sm first:rounded-s-md last:rounded-e-md focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:bg-primary dark:border-white/10 dark:text-white dark:focus:bg-gray-500"
aria-current="page">1</button>
<button type="button"
class="min-h-[46px] min-w-[46px] flex justify-center items-center border border-gray-200 text-gray-800 hover:bg-gray-100 py-2 px-3 text-sm first:rounded-s-md last:rounded-e-md focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:border-white/10 dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">2</button>
<button type="button"
class="min-h-[46px] min-w-[46px] flex justify-center items-center border border-gray-200 text-gray-800 hover:bg-gray-100 py-2 px-3 text-sm first:rounded-s-md last:rounded-e-md focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:border-white/10 dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">3</button>
<div class="hs-tooltip ti-main-tooltip border border-gray-200 dark:border-white/10">
<button type="button"
class="hs-tooltip-toggle group min-h-[44px] min-w-[46px] flex justify-center items-center text-gray-400 hover:text-primary p-2 text-sm focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:text-primary dark:focus:bg-white/10">
<span class="group-hover:hidden text-xs">•••</span>
<svg class="group-hover:block hidden flex-shrink-0 size-5" xmlns="http://www.w3.org/2000/svg"
width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<path d="m6 17 5-5-5-5" />
<path d="m13 17 5-5-5-5" />
</svg>
<span
class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 !bg-black text-xs font-medium text-white shadow-sm dark:bg-bodybg"
role="tooltip">
Next 4 pages
</span>
</button>
</div>
<button type="button"
class="min-h-[46px] min-w-[46px] flex justify-center items-center border border-gray-200 text-gray-800 hover:bg-gray-100 py-2 px-3 text-sm first:rounded-s-md last:rounded-e-md focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:border-white/10 dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">8</button>
<button type="button"
class="min-h-[46px] min-w-[46px]py-2 px-2.5 inline-flex justify-center items-center gap-x-1.5 text-sm first:rounded-s-md last:rounded-e-md border border-gray-200 text-gray-800 hover:bg-gray-100 focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:border-white/10 dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">
<span aria-hidden="true" class="sr-only">Next</span>
<svg class="flex-shrink-0 size-3.5 rtl:rotate-[180deg]" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="m9 18 6-6-6-6" />
</svg>
</button>
</nav>
<!-- End Pagination -->
<div class="sm:flex justify-center items-center gap-x-5 text-center space-y-2 sm:space-y-0">
<!-- Dropdown -->
<div class="hs-dropdown ti-dropdown [--placement:top-left]">
<button id="hs-pagination-dropdown-bordered-group2" type="button"
class="hs-dropdown-toggle !py-3 !px-3.5 ti-dropdown-toggle">
5 page
<svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="m6 9 6 6 6-6" />
</svg>
</button>
<div class="hs-dropdown-menu ti-dropdown-menu"
aria-labelledby="hs-pagination-dropdown-bordered-group2">
<button type="button" class="ti-dropdown-item w-full justify-between">
5 page
<i class="ri-check-line text-primary flex-shrink-0 size-4"></i>
</button>
<button type="button" class="ti-dropdown-item w-full">
8 page
</button>
<button type="button" class="ti-dropdown-item w-full">
10 page
</button>
</div>
</div>
<!-- End Dropdown -->
<!-- Go To Page -->
<div class="flex justify-center sm:justify-start items-center gap-x-2">
<span class="text-sm text-gray-800 whitespace-nowrap dark:text-white">
Go to
</span>
<input type="number"
class="min-h-[46px] p-3 block w-12 border-gray-200 rounded-md text-sm text-center focus:border-primary focus:ring-primary [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-gray-400 dark:focus:ring-gray-600"
style="-moz-appearance: textfield;">
<span class="text-sm text-gray-800 whitespace-nowrap dark:text-white">
page
</span>
</div>
<!-- End Go To Page -->
</div>
</div>
Pagination Style 14
Go to
page
Go to
page
Go to
page
<div class="grid justify-center sm:flex sm:justify-start sm:items-center gap-2">
<!-- Pagination Wrapper -->
<nav class="flex items-center -space-x-px">
<button type="button"
class="min-h-[32px] min-w-8 py-2 px-2 inline-flex justify-center items-center gap-x-1.5 text-sm first:rounded-s-full last:rounded-e-full border border-gray-200 text-gray-800 hover:bg-gray-100 focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:border-white/10 dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">
<svg class="flex-shrink-0 size-3.5 rtl:rotate-[180deg]" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="m15 18-6-6 6-6" />
</svg>
<span aria-hidden="true" class="sr-only">Previous</span>
</button>
<button type="button"
class="min-h-[32px] min-w-8 flex justify-center items-center bg-primary text-white border border-gray-200 py-1 px-2.5 text-sm first:rounded-s-full last:rounded-e-full focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:bg-primary dark:border-white/10 dark:text-white dark:focus:bg-gray-500"
aria-current="page">1</button>
<button type="button"
class="min-h-[32px] min-w-8 flex justify-center items-center border border-gray-200 text-gray-800 hover:bg-gray-100 py-1 px-2.5 text-sm first:rounded-s-full last:rounded-e-full focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:border-white/10 dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">2</button>
<button type="button"
class="min-h-[32px] min-w-8 flex justify-center items-center border border-gray-200 text-gray-800 hover:bg-gray-100 py-1 px-2.5 text-sm first:rounded-s-full last:rounded-e-full focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:border-white/10 dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">3</button>
<div class="hs-tooltip ti-main-tooltip border border-gray-200 dark:border-white/10">
<button type="button"
class="hs-tooltip-toggle group min-h-[30px] min-w-8 flex justify-center items-center text-gray-400 hover:text-primary py-1 px-2.5 text-sm focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:text-primary dark:focus:bg-white/10">
<span class="group-hover:hidden text-xs">•••</span>
<svg class="group-hover:block hidden flex-shrink-0 size-5" xmlns="http://www.w3.org/2000/svg"
width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<path d="m6 17 5-5-5-5" />
<path d="m13 17 5-5-5-5" />
</svg>
<span
class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 !bg-black text-xs font-medium text-white shadow-sm dark:bg-bodybg"
role="tooltip">
Next 4 pages
</span>
</button>
</div>
<button type="button"
class="min-h-[32px] min-w-8 flex justify-center items-center border border-gray-200 text-gray-800 hover:bg-gray-100 py-1 px-2.5 text-sm first:rounded-s-full last:rounded-e-full focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:border-white/10 dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">8</button>
<button type="button"
class="min-h-[32px] min-w-8 py-1 px-2.5 inline-flex justify-center items-center gap-x-1.5 text-sm first:rounded-s-full last:rounded-e-full border border-gray-200 text-gray-800 hover:bg-gray-100 focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:border-white/10 dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">
<span aria-hidden="true" class="sr-only">Next</span>
<svg class="flex-shrink-0 size-3.5 rtl:rotate-[180deg]" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="m9 18 6-6-6-6" />
</svg>
</button>
</nav>
<!-- End Pagination -->
<div class="sm:flex justify-center items-center gap-x-5 text-center space-y-2 sm:space-y-0">
<!-- Dropdown -->
<div class="hs-dropdown ti-dropdown [--placement:top-left]">
<button id="hs-pagination-dropdown-bordered-group-round" type="button"
class="hs-dropdown-toggle !py-1 !px-2.5 ti-dropdown-toggle">
5 page
<svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="m6 9 6 6 6-6" />
</svg>
</button>
<div class="hs-dropdown-menu ti-dropdown-menu"
aria-labelledby="hs-pagination-dropdown-bordered-group-round">
<button type="button" class="ti-dropdown-item w-full justify-between">
5 page
<i class="ri-check-line text-primary flex-shrink-0 size-4"></i>
</button>
<button type="button" class="ti-dropdown-item w-full">
8 page
</button>
<button type="button" class="ti-dropdown-item w-full">
10 page
</button>
</div>
</div>
<!-- End Dropdown -->
<!-- Go To Page -->
<div class="flex justify-center sm:justify-start items-center gap-x-2">
<span class="text-sm text-gray-800 whitespace-nowrap dark:text-white">
Go to
</span>
<input type="number"
class="min-h-[32px] py-1 px-2.5 block w-12 border-gray-200 rounded-md text-sm text-center focus:border-primary focus:ring-primary [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-gray-400 dark:focus:ring-gray-600"
style="-moz-appearance: textfield;">
<span class="text-sm text-gray-800 whitespace-nowrap dark:text-white">
page
</span>
</div>
<!-- End Go To Page -->
</div>
</div>
<!-- End Pagination Wrapper -->
<!-- Pagination Wrapper -->
<div class="grid justify-center sm:flex sm:justify-start sm:items-center gap-2">
<!-- Pagination Wrapper -->
<nav class="flex items-center -space-x-px">
<button type="button"
class="min-h-[38px] min-w-[38px] py-2 px-2.5 inline-flex justify-center items-center gap-x-1.5 text-sm first:rounded-s-full last:rounded-e-full border border-gray-200 text-gray-800 hover:bg-gray-100 focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:border-white/10 dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">
<svg class="flex-shrink-0 size-3.5 rtl:rotate-[180deg]" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="m15 18-6-6 6-6" />
</svg>
<span aria-hidden="true" class="sr-only">Previous</span>
</button>
<button type="button"
class="min-h-[38px] min-w-[38px] flex justify-center items-center bg-primary text-white border border-gray-200 py-2 px-3 text-sm first:rounded-s-full last:rounded-e-full focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:bg-primary dark:border-white/10 dark:text-white dark:focus:bg-gray-500"
aria-current="page">1</button>
<button type="button"
class="min-h-[38px] min-w-[38px] flex justify-center items-center border border-gray-200 text-gray-800 hover:bg-gray-100 py-2 px-3 text-sm first:rounded-s-full last:rounded-e-full focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:border-white/10 dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">2</button>
<button type="button"
class="min-h-[38px] min-w-[38px] flex justify-center items-center border border-gray-200 text-gray-800 hover:bg-gray-100 py-2 px-3 text-sm first:rounded-s-full last:rounded-e-full focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:border-white/10 dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">3</button>
<div class="hs-tooltip ti-main-tooltip border border-gray-200 dark:border-white/10">
<button type="button"
class="hs-tooltip-toggle group min-h-[36px] min-w-[36px] flex justify-center items-center text-gray-400 hover:text-primary p-2 text-sm focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:text-primary dark:focus:bg-white/10">
<span class="group-hover:hidden text-xs">•••</span>
<svg class="group-hover:block hidden flex-shrink-0 size-5" xmlns="http://www.w3.org/2000/svg"
width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<path d="m6 17 5-5-5-5" />
<path d="m13 17 5-5-5-5" />
</svg>
<span
class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 !bg-black text-xs font-medium text-white shadow-sm dark:bg-bodybg"
role="tooltip">
Next 4 pages
</span>
</button>
</div>
<button type="button"
class="min-h-[38px] min-w-[38px] flex justify-center items-center border border-gray-200 text-gray-800 hover:bg-gray-100 py-2 px-3 text-sm first:rounded-s-full last:rounded-e-full focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:border-white/10 dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">8</button>
<button type="button"
class="min-h-[38px] min-w-[38px] py-2 px-2.5 inline-flex justify-center items-center gap-x-1.5 text-sm first:rounded-s-full last:rounded-e-full border border-gray-200 text-gray-800 hover:bg-gray-100 focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:border-white/10 dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">
<span aria-hidden="true" class="sr-only">Next</span>
<svg class="flex-shrink-0 size-3.5 rtl:rotate-[180deg]" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="m9 18 6-6-6-6" />
</svg>
</button>
</nav>
<!-- End Pagination -->
<div class="sm:flex justify-center items-center gap-x-5 text-center space-y-2 sm:space-y-0">
<!-- Dropdown -->
<div class="hs-dropdown ti-dropdown [--placement:top-left]">
<button id="hs-pagination-dropdown-bordered-group-round1" type="button"
class="hs-dropdown-toggle !py-2 !px-2.5 ti-dropdown-toggle">
5 page
<svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="m6 9 6 6 6-6" />
</svg>
</button>
<div class="hs-dropdown-menu ti-dropdown-menu"
aria-labelledby="hs-pagination-dropdown-bordered-group-round1">
<button type="button" class="ti-dropdown-item w-full justify-between">
5 page
<i class="ri-check-line text-primary flex-shrink-0 size-4"></i>
</button>
<button type="button" class="ti-dropdown-item w-full">
8 page
</button>
<button type="button" class="ti-dropdown-item w-full">
10 page
</button>
</div>
</div>
<!-- End Dropdown -->
<!-- Go To Page -->
<div class="flex justify-center sm:justify-start items-center gap-x-2">
<span class="text-sm text-gray-800 whitespace-nowrap dark:text-white">
Go to
</span>
<input type="number"
class="min-h-[32px] py-2 px-2.5 block w-12 border-gray-200 rounded-md text-sm text-center focus:border-primary focus:ring-primary [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-gray-400 dark:focus:ring-gray-600"
style="-moz-appearance: textfield;">
<span class="text-sm text-gray-800 whitespace-nowrap dark:text-white">
page
</span>
</div>
<!-- End Go To Page -->
</div>
</div>
<!-- End Pagination Wrapper -->
<!-- Pagination Wrapper -->
<div class="grid justify-center sm:flex sm:justify-start sm:items-center gap-2">
<!-- Pagination Wrapper -->
<nav class="flex items-center -space-x-px">
<button type="button"
class="min-h-[46px] min-w-[46px] py-2 px-2.5 inline-flex justify-center items-center gap-x-1.5 text-sm first:rounded-s-full last:rounded-e-full border border-gray-200 text-gray-800 hover:bg-gray-100 focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:border-white/10 dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">
<svg class="flex-shrink-0 size-3.5 rtl:rotate-[180deg]" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="m15 18-6-6 6-6" />
</svg>
<span aria-hidden="true" class="sr-only">Previous</span>
</button>
<button type="button"
class="min-h-[46px] min-w-[46px] flex justify-center items-center bg-primary text-white border border-gray-200 py-2 px-3 text-sm first:rounded-s-full last:rounded-e-full focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:bg-primary dark:border-white/10 dark:text-white dark:focus:bg-gray-500"
aria-current="page">1</button>
<button type="button"
class="min-h-[46px] min-w-[46px] flex justify-center items-center border border-gray-200 text-gray-800 hover:bg-gray-100 py-2 px-3 text-sm first:rounded-s-full last:rounded-e-full focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:border-white/10 dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">2</button>
<button type="button"
class="min-h-[46px] min-w-[46px] flex justify-center items-center border border-gray-200 text-gray-800 hover:bg-gray-100 py-2 px-3 text-sm first:rounded-s-full last:rounded-e-full focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:border-white/10 dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">3</button>
<div class="hs-tooltip ti-main-tooltip border border-gray-200 dark:border-white/10">
<button type="button"
class="hs-tooltip-toggle group min-h-[44px] min-w-[46px] flex justify-center items-center text-gray-400 hover:text-primary p-2 text-sm focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:text-primary dark:focus:bg-white/10">
<span class="group-hover:hidden text-xs">•••</span>
<svg class="group-hover:block hidden flex-shrink-0 size-5" xmlns="http://www.w3.org/2000/svg"
width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<path d="m6 17 5-5-5-5" />
<path d="m13 17 5-5-5-5" />
</svg>
<span
class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 !bg-black text-xs font-medium text-white shadow-sm dark:bg-bodybg"
role="tooltip">
Next 4 pages
</span>
</button>
</div>
<button type="button"
class="min-h-[46px] min-w-[46px] flex justify-center items-center border border-gray-200 text-gray-800 hover:bg-gray-100 py-2 px-3 text-sm first:rounded-s-full last:rounded-e-full focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:border-white/10 dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">8</button>
<button type="button"
class="min-h-[46px] min-w-[46px]py-2 px-2.5 inline-flex justify-center items-center gap-x-1.5 text-sm first:rounded-s-full last:rounded-e-full border border-gray-200 text-gray-800 hover:bg-gray-100 focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:border-white/10 dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10">
<span aria-hidden="true" class="sr-only">Next</span>
<svg class="flex-shrink-0 size-3.5 rtl:rotate-[180deg]" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="m9 18 6-6-6-6" />
</svg>
</button>
</nav>
<!-- End Pagination -->
<div class="sm:flex justify-center items-center gap-x-5 text-center space-y-2 sm:space-y-0">
<!-- Dropdown -->
<div class="hs-dropdown ti-dropdown [--placement:top-left]">
<button id="hs-pagination-dropdown-bordered-group-round2" type="button"
class="hs-dropdown-toggle !py-3 !px-3.5 ti-dropdown-toggle">
5 page
<svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="m6 9 6 6 6-6" />
</svg>
</button>
<div class="hs-dropdown-menu ti-dropdown-menu"
aria-labelledby="hs-pagination-dropdown-bordered-group-round2">
<button type="button" class="ti-dropdown-item w-full justify-between">
5 page
<i class="ri-check-line text-primary flex-shrink-0 size-4"></i>
</button>
<button type="button" class="ti-dropdown-item w-full">
8 page
</button>
<button type="button" class="ti-dropdown-item w-full">
10 page
</button>
</div>
</div>
<!-- End Dropdown -->
<!-- Go To Page -->
<div class="flex justify-center sm:justify-start items-center gap-x-2">
<span class="text-sm text-gray-800 whitespace-nowrap dark:text-white">
Go to
</span>
<input type="number"
class="min-h-[46px] p-3 block w-12 border-gray-200 rounded-md text-sm text-center focus:border-primary focus:ring-primary [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-gray-400 dark:focus:ring-gray-600"
style="-moz-appearance: textfield;">
<span class="text-sm text-gray-800 whitespace-nowrap dark:text-white">
page
</span>
</div>
<!-- End Go To Page -->
</div>
</div>