Pagination
Pagination
Enable users to navigate through large sets of data or content by dividing them into manageable pages with easy-to-use controls.
Pagination
<!-- pagination 1 -->
<nav aria-label="Page navigation example">
<ul class="inline-flex flex-wrap gap-2">
<li>
<button class="flex layhetgsjdcb yhansklopals uajskeiolksb h-10 leading-tight [&.active]:!bg-purple-400 hover:!bg-purple-400 backdrop-opacity-15 backdrop-blur backdrop-saturate-150 bg-white/70 dark:bg-neutral-500/70 border border-black/[.05] dark:border-white/40 rounded-s">
<i class="bi bi-arrow-left rtl:rotate-180"></i>
</button>
</li>
<li>
<button class="flex layhetgsjdcb yhansklopals uajskeiolksb h-10 leading-tight [&.active]:!bg-purple-400 hover:!bg-purple-400 backdrop-opacity-15 backdrop-blur backdrop-saturate-150 bg-white/70 dark:bg-neutral-500/70 border border-black/[.05] dark:border-white/40">1</button>
</li>
<li>
<button aria-current="page" class="active flex layhetgsjdcb yhansklopals uajskeiolksb h-10 leading-tight [&.active]:!bg-purple-400 hover:!bg-purple-400 backdrop-opacity-15 backdrop-blur backdrop-saturate-150 bg-white/70 dark:bg-neutral-500/70 border border-black/[.05] dark:border-white/40">2</button>
</li>
<li>
<button class="flex layhetgsjdcb yhansklopals uajskeiolksb h-10 leading-tight [&.active]:!bg-purple-400 hover:!bg-purple-400 backdrop-opacity-15 backdrop-blur backdrop-saturate-150 bg-white/70 dark:bg-neutral-500/70 border border-black/[.05] dark:border-white/40">3</button>
</li>
<li>
<button class="flex layhetgsjdcb yhansklopals uajskeiolksb h-10 leading-tight [&.active]:!bg-purple-400 hover:!bg-purple-400 backdrop-opacity-15 backdrop-blur backdrop-saturate-150 bg-white/70 dark:bg-neutral-500/70 border border-black/[.05] dark:border-white/40">4</button>
</li>
<li>
<button class="flex layhetgsjdcb yhansklopals uajskeiolksb h-10 leading-tight [&.active]:!bg-purple-400 hover:!bg-purple-400 backdrop-opacity-15 backdrop-blur backdrop-saturate-150 bg-white/70 dark:bg-neutral-500/70 border border-black/[.05] dark:border-white/40">5</button>
</li>
<li>
<button class="flex layhetgsjdcb yhansklopals uajskeiolksb h-10 leading-tight [&.active]:!bg-purple-400 hover:!bg-purple-400 backdrop-opacity-15 backdrop-blur backdrop-saturate-150 bg-white/70 dark:bg-neutral-500/70 border border-black/[.05] dark:border-white/40 rounded-e">
<i class="bi bi-arrow-right rtl:rotate-180"></i>
</button>
</li>
</ul>
</nav>
<!-- pagination 2 -->
<nav aria-label="Page navigation example">
<ul class="inline-flex *:-me-[1px]">
<li>
<button class="flex layhetgsjdcb yhansklopals uajskeiolksb h-10 leading-tight [&.active]:!bg-purple-400 hover:!bg-purple-400 backdrop-opacity-15 backdrop-blur backdrop-saturate-150 bg-white/70 dark:bg-neutral-500/70 border border-black/[.05] dark:border-white/40 rounded-s">
«
</button>
</li>
<li>
<button class="flex layhetgsjdcb yhansklopals uajskeiolksb h-10 leading-tight [&.active]:!bg-purple-400 hover:!bg-purple-400 backdrop-opacity-15 backdrop-blur backdrop-saturate-150 bg-white/70 dark:bg-neutral-500/70 border border-black/[.05] dark:border-white/40">
1
</button>
</li>
<li>
<button class="flex layhetgsjdcb yhansklopals uajskeiolksb h-10 leading-tight [&.active]:!bg-purple-400 hover:!bg-purple-400 backdrop-opacity-15 backdrop-blur backdrop-saturate-150 bg-white/70 dark:bg-neutral-500/70 border border-black/[.05] dark:border-white/40">
2
</button>
</li>
<li>
<button class="flex layhetgsjdcb yhansklopals uajskeiolksb h-10 leading-tight [&.active]:!bg-purple-400 hover:!bg-purple-400 backdrop-opacity-15 backdrop-blur backdrop-saturate-150 bg-white/70 dark:bg-neutral-500/70 border border-black/[.05] dark:border-white/40">
3
</button>
</li>
<li>
<button class="flex layhetgsjdcb yhansklopals uajskeiolksb h-10 leading-tight [&.active]:!bg-purple-400 hover:!bg-purple-400 backdrop-opacity-15 backdrop-blur backdrop-saturate-150 bg-white/70 dark:bg-neutral-500/70 border border-black/[.05] dark:border-white/40">
4
</button>
</li>
<li>
<button class="flex layhetgsjdcb yhansklopals uajskeiolksb h-10 leading-tight [&.active]:!bg-purple-400 hover:!bg-purple-400 backdrop-opacity-15 backdrop-blur backdrop-saturate-150 bg-white/70 dark:bg-neutral-500/70 border border-black/[.05] dark:border-white/40 rounded-e">
»
</button>
</li>
</ul>
</nav>