Basic example
Use the pagination utility classes to indicate a series of content for your website.
<nav aria-label="Page navigation example">
<ul class="list-style-none flex">
<li>
<a
class="relative block rounded bg-transparent px-3 py-1.5 text-sm text-surface transition duration-300 hover:bg-neutral-100 focus:bg-neutral-100 focus:text-primary-700 focus:outline-none focus:ring-0 active:bg-neutral-100 active:text-primary-700 dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700 dark:active:text-primary-500"
href="#"
>Previous</a
>
</li>
<li>
<a
class="relative block rounded bg-transparent px-3 py-1.5 text-sm text-surface transition duration-300 hover:bg-neutral-100 focus:bg-neutral-100 focus:text-primary-700 focus:outline-none active:bg-neutral-100 active:text-primary-700 dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700 dark:active:text-primary-500"
href="#"
>1</a
>
</li>
<li aria-current="page">
<a
class="relative block rounded bg-transparent px-3 py-1.5 text-sm text-surface transition duration-300 hover:bg-neutral-100 focus:bg-neutral-100 focus:text-primary-700 focus:outline-none active:bg-neutral-100 active:text-primary-700 dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700 dark:active:text-primary-500"
href="#"
>2</a
>
</li>
<li>
<a
class="relative block rounded bg-transparent px-3 py-1.5 text-sm text-surface transition duration-300 hover:bg-neutral-100 focus:bg-neutral-100 focus:text-primary-700 focus:outline-none active:bg-neutral-100 active:text-primary-700 dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700 dark:active:text-primary-500"
href="#"
>3</a
>
</li>
<li>
<a
class="relative block rounded bg-transparent px-3 py-1.5 text-sm text-surface transition duration-300 hover:bg-neutral-100 focus:bg-neutral-100 focus:text-primary-700 focus:outline-none active:bg-neutral-100 active:text-primary-700 dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700 dark:active:text-primary-500"
href="#"
>Next</a
>
</li>
</ul>
</nav>
Icons
The following example of a pagination component shows how the previous and next pages can be displayed using SVG icons instead.
<nav aria-label="Page navigation example">
<ul class="list-style-none flex">
<li>
<a
class="relative block rounded bg-transparent px-3 py-1.5 text-sm text-surface transition duration-300 hover:bg-neutral-100 focus:bg-neutral-100 focus:text-primary-700 focus:outline-none active:bg-neutral-100 active:text-primary-700 dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700 dark:active:text-primary-500"
href="#"
aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li>
<a
class="relative block rounded bg-transparent px-3 py-1.5 text-sm text-surface transition duration-300 hover:bg-neutral-100 focus:bg-neutral-100 focus:text-primary-700 focus:outline-none active:bg-neutral-100 active:text-primary-700 dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700 dark:active:text-primary-500"
href="#"
>1</a
>
</li>
<li aria-current="page">
<a
class="relative block rounded bg-transparent px-3 py-1.5 text-sm text-surface transition duration-300 hover:bg-neutral-100 focus:bg-neutral-100 focus:text-primary-700 focus:outline-none active:bg-neutral-100 active:text-primary-700 dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700 dark:active:text-primary-500"
href="#"
>2</a
>
</li>
<li>
<a
class="relative block rounded bg-transparent px-3 py-1.5 text-sm text-surface transition duration-300 hover:bg-neutral-100 focus:bg-neutral-100 focus:text-primary-700 focus:outline-none active:bg-neutral-100 active:text-primary-700 dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700 dark:active:text-primary-500"
href="#"
>3</a
>
</li>
<li>
<a
class="relative block rounded bg-transparent px-3 py-1.5 text-sm text-surface transition duration-300 hover:bg-neutral-100 focus:bg-neutral-100 focus:text-primary-700 focus:outline-none active:bg-neutral-100 active:text-primary-700 dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700 dark:active:text-primary-500"
href="#"
aria-label="Next"
><span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
Disabled and active states
Use the following styles to indicate a disabled adn active states of pagination.
<nav aria-label="Page navigation example">
<ul class="list-style-none flex">
<li>
<a
class="pointer-events-none relative block rounded bg-transparent px-3 py-1.5 text-sm text-surface/50 transition duration-300 dark:text-neutral-400"
>Previous</a
>
</li>
<li>
<a
class="relative block rounded bg-transparent px-3 py-1.5 text-sm text-surface transition duration-300 hover:bg-neutral-100 focus:bg-neutral-100 focus:text-primary-700 focus:outline-none active:bg-neutral-100 active:text-primary-700 dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700 dark:active:text-primary-500"
href="#!"
>1</a
>
</li>
<li aria-current="page">
<a
class="relative block rounded bg-primary-100 px-3 py-1.5 text-sm font-medium text-primary-700 transition duration-300 focus:outline-none dark:bg-slate-900 dark:text-primary-500"
href="#!"
>2
<span
class="absolute -m-px h-px w-px overflow-hidden whitespace-nowrap border-0 p-0 [clip:rect(0,0,0,0)]"
>(current)</span
>
</a>
</li>
<li>
<a
class="relative block rounded bg-transparent px-3 py-1.5 text-sm text-surface transition duration-300 hover:bg-neutral-100 focus:bg-neutral-100 focus:text-primary-700 focus:outline-none active:bg-neutral-100 active:text-primary-700 dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700 dark:active:text-primary-500"
href="#!"
>3</a
>
</li>
<li>
<a
class="relative block rounded bg-transparent px-3 py-1.5 text-sm text-surface transition duration-300 hover:bg-neutral-100 focus:bg-neutral-100 focus:text-primary-700 focus:outline-none active:bg-neutral-100 active:text-primary-700 dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700 dark:active:text-primary-500"
href="#!"
>Next</a
>
</li>
</ul>
</nav>
Alignment
Change the alignment of pagination components with flexbox utilities. For
example, with
.justify-end:
<nav aria-label="Page navigation example">
<ul class="list-style-none flex">
<li>
<a
class="relative block rounded bg-transparent px-3 py-1.5 text-sm text-surface transition duration-300 hover:bg-neutral-100 focus:bg-neutral-100 focus:text-primary-700 focus:outline-none focus:ring-0 active:bg-neutral-100 active:text-primary-700 dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700 dark:active:text-primary-500"
href="#"
>Previous</a
>
</li>
<li>
<a
class="relative block rounded bg-transparent px-3 py-1.5 text-sm text-surface transition duration-300 hover:bg-neutral-100 focus:bg-neutral-100 focus:text-primary-700 focus:outline-none active:bg-neutral-100 active:text-primary-700 dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700 dark:active:text-primary-500"
href="#"
>1</a
>
</li>
<li aria-current="page">
<a
class="relative block rounded bg-transparent px-3 py-1.5 text-sm text-surface transition duration-300 hover:bg-neutral-100 focus:bg-neutral-100 focus:text-primary-700 focus:outline-none active:bg-neutral-100 active:text-primary-700 dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700 dark:active:text-primary-500"
href="#"
>2</a
>
</li>
<li>
<a
class="relative block rounded bg-transparent px-3 py-1.5 text-sm text-surface transition duration-300 hover:bg-neutral-100 focus:bg-neutral-100 focus:text-primary-700 focus:outline-none active:bg-neutral-100 active:text-primary-700 dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700 dark:active:text-primary-500"
href="#"
>3</a
>
</li>
<li>
<a
class="relative block rounded bg-transparent px-3 py-1.5 text-sm text-surface transition duration-300 hover:bg-neutral-100 focus:bg-neutral-100 focus:text-primary-700 focus:outline-none active:bg-neutral-100 active:text-primary-700 dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700 dark:active:text-primary-500"
href="#"
>Next</a
>
</li>
</ul>
</nav>
Sizing
Pagination allows you to manipulate its proportions by changing text size and spacing.
<!-- First navigation component with larger text and padding -->
<nav aria-label="Page navigation example">
<!-- Unordered list container with flex display and no list style -->
<ul class="list-style-none flex">
<!-- Previous button (disabled) -->
<li>
<a
class="pointer-events-none relative block rounded bg-transparent px-5 py-3 text-lg text-surface/50 transition duration-300 dark:text-neutral-400"
>Previous</a
>
</li>
<!-- Page number 1 -->
<li>
<a
class="relative block rounded bg-transparent px-5 py-3 text-lg text-surface transition duration-300 hover:bg-neutral-100 focus:bg-neutral-100 focus:text-primary-700 focus:outline-none active:bg-neutral-100 active:text-primary-700 dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700 dark:active:text-primary-500"
href="#!"
>1</a
>
</li>
<!-- Page number 2 (current) -->
<li aria-current="page">
<a
class="relative block rounded bg-primary-100 px-5 py-3 text-lg font-medium text-primary-700 transition duration-300 focus:outline-none dark:bg-slate-900 dark:text-primary-500"
href="#!"
>2
<!-- Visually hidden text indicating current page -->
<span
class="absolute -m-px h-px w-px overflow-hidden whitespace-nowrap border-0 p-0 [clip:rect(0,0,0,0)]"
>(current)</span
>
</a>
</li>
<!-- Page number 3 -->
<li>
<a
class="relative block rounded bg-transparent px-5 py-3 text-lg text-surface transition duration-300 hover:bg-neutral-100 focus:bg-neutral-100 focus:text-primary-700 focus:outline-none active:bg-neutral-100 active:text-primary-700 dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700 dark:active:text-primary-500"
href="#!"
>3</a
>
</li>
<!-- Next button -->
<li>
<a
class="relative block rounded bg-transparent px-5 py-3 text-lg text-surface transition duration-300 hover:bg-neutral-100 focus:bg-neutral-100 focus:text-primary-700 focus:outline-none active:bg-neutral-100 active:text-primary-700 dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700 dark:active:text-primary-500"
href="#!"
>Next</a
>
</li>
</ul>
</nav>
<!-- Second navigation component with smaller text and padding -->
<nav aria-label="Page navigation example">
<!-- Unordered list for the navigation items -->
<ul class="list-style-none flex">
<!-- Previous page item with disabled pointer events -->
<li>
<a
class="pointer-events-none relative block rounded bg-transparent px-2 py-1 text-sm text-surface/50 transition duration-300 dark:text-neutral-400"
>Previous</a
>
</li>
<!-- Page number 1 item -->
<li>
<a
class="relative block rounded bg-transparent px-2 py-1 text-sm text-surface transition duration-300 hover:bg-neutral-100 focus:bg-neutral-100 focus:text-primary-700 focus:outline-none active:bg-neutral-100 active:text-primary-700 dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700 dark:active:text-primary-500"
href="#!"
>1</a
>
</li>
<!-- Current page (2) item with highlighted background and "current" label -->
<li aria-current="page">
<a
class="relative block rounded bg-primary-100 px-2 py-1 text-sm font-medium text-primary-700 transition duration-300 focus:outline-none dark:bg-slate-900 dark:text-primary-500"
href="#!"
>2
<!-- Hidden "current" label for screen readers -->
<span
class="absolute -m-px h-px w-px overflow-hidden whitespace-nowrap border-0 p-0 [clip:rect(0,0,0,0)]"
>(current)</span
>
</a>
</li>
<!-- Page number 3 item -->
<li>
<a
class="relative block rounded bg-transparent px-2 py-1 text-sm text-surface transition duration-300 hover:bg-neutral-100 focus:bg-neutral-100 focus:text-primary-700 focus:outline-none active:bg-neutral-100 active:text-primary-700 dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700 dark:active:text-primary-500"
href="#!"
>3</a
>
</li>
<!-- Next page item -->
<li>
<a
class="relative block rounded bg-transparent px-2 py-1 text-sm text-surface transition duration-300 hover:bg-neutral-100 focus:bg-neutral-100 focus:text-primary-700 focus:outline-none active:bg-neutral-100 active:text-primary-700 dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700 dark:active:text-primary-500"
href="#!"
>Next</a
>
</li>
</ul>
</nav>
Shape
Use .rounded-full class to change the shape to a circle.
<nav aria-label="Page navigation example">
<ul class="list-style-none flex">
<li>
<a
class="pointer-events-none relative block rounded-full bg-transparent px-3 py-1.5 text-sm text-surface/50 transition duration-300 dark:text-neutral-400"
>Previous</a
>
</li>
<li>
<a
class="relative block rounded-full bg-transparent px-3 py-1.5 text-sm text-surface transition duration-300 hover:bg-neutral-100 focus:bg-neutral-100 focus:text-primary-700 focus:outline-none active:bg-neutral-100 active:text-primary-700 dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700 dark:active:text-primary-500"
href="#!"
>1</a
>
</li>
<li aria-current="page">
<a
class="relative block rounded-full bg-primary-100 px-3 py-1.5 text-sm font-medium text-primary-700 transition duration-300 focus:outline-none dark:bg-slate-900 dark:text-primary-500"
href="#!"
>2
<span
class="absolute -m-px h-px w-px overflow-hidden whitespace-nowrap border-0 p-0 [clip:rect(0,0,0,0)]"
>(current)</span
>
</a>
</li>
<li>
<a
class="relative block rounded-full bg-transparent px-3 py-1.5 text-sm text-surface transition duration-300 hover:bg-neutral-100 focus:bg-neutral-100 focus:text-primary-700 focus:outline-none active:bg-neutral-100 active:text-primary-700 dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700 dark:active:text-primary-500"
href="#!"
>3</a
>
</li>
<li>
<a
class="relative block rounded-full bg-transparent px-3 py-1.5 text-sm text-surface transition duration-300 hover:bg-neutral-100 focus:bg-neutral-100 focus:text-primary-700 focus:outline-none active:bg-neutral-100 active:text-primary-700 dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700 dark:active:text-primary-500"
href="#!"
>Next</a
>
</li>
</ul>
</nav>
Color options
You can use each color from our color palette within a pagination.
<!-- First navigation element with primary theme -->
<nav aria-label="Page navigation example">
<ul class="list-style-none mb-6 flex">
<li>
<a
class="pointer-events-none relative block rounded bg-transparent px-3 py-1.5 text-sm text-surface/50 transition duration-300 dark:text-neutral-400"
>Previous</a
>
</li>
<li>
<a
class="relative block rounded bg-transparent px-3 py-1.5 text-sm text-surface transition duration-300 hover:bg-neutral-100 focus:bg-neutral-100 focus:text-primary-700 focus:outline-none active:bg-neutral-100 active:text-primary-700 dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700 dark:active:text-primary-500"
href="#!"
>1</a
>
</li>
<li aria-current="page">
<a
class="relative block rounded bg-primary-100 px-3 py-1.5 text-sm font-medium text-primary-700 transition duration-300 focus:outline-none dark:bg-slate-900 dark:text-primary-500"
href="#!"
>2
<span
class="absolute -m-px h-px w-px overflow-hidden whitespace-nowrap border-0 p-0 [clip:rect(0,0,0,0)]"
>(current)</span
>
</a>
</li>
<li>
<a
class="relative block rounded bg-transparent px-3 py-1.5 text-sm text-surface transition duration-300 hover:bg-neutral-100 focus:bg-neutral-100 focus:text-primary-700 focus:outline-none active:bg-neutral-100 active:text-primary-700 dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700 dark:active:text-primary-500"
href="#!"
>3</a
>
</li>
<li>
<a
class="relative block rounded bg-transparent px-3 py-1.5 text-sm text-surface transition duration-300 hover:bg-neutral-100 focus:bg-neutral-100 focus:text-primary-700 focus:outline-none active:bg-neutral-100 active:text-primary-700 dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700 dark:active:text-primary-500"
href="#!"
>Next</a
>
</li>
</ul>
</nav>
<!-- /First navigation element with primary theme -->
<!-- Second navigation element with secondary theme -->
<nav aria-label="Page navigation example">
<ul class="list-style-none mb-6 flex">
<li>
<a
class="pointer-events-none relative block rounded bg-transparent px-3 py-1.5 text-sm text-surface/50 transition duration-300 dark:text-neutral-400"
>Previous</a
>
</li>
<li>
<a
class="relative block rounded bg-transparent px-3 py-1.5 text-sm text-surface transition duration-300 hover:bg-neutral-100 focus:bg-neutral-100 focus:text-secondary-800 focus:outline-none active:bg-neutral-100 active:text-secondary-800 dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 dark:focus:text-secondary-400 dark:active:bg-neutral-700 dark:active:text-secondary-400"
href="#!"
>1</a
>
</li>
<li aria-current="page">
<a
class="relative block rounded bg-secondary-100 px-3 py-1.5 text-sm font-medium text-secondary-800 transition duration-300 focus:outline-none dark:bg-[#202124] dark:text-secondary-400"
href="#!"
>2
<span
class="absolute -m-px h-px w-px overflow-hidden whitespace-nowrap border-0 p-0 [clip:rect(0,0,0,0)]"
>(current)</span
>
</a>
</li>
<li>
<a
class="relative block rounded bg-transparent px-3 py-1.5 text-sm text-surface transition duration-300 hover:bg-neutral-100 focus:bg-neutral-100 focus:text-secondary-800 focus:outline-none active:bg-neutral-100 active:text-secondary-800 dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 dark:focus:text-secondary-400 dark:active:bg-neutral-700 dark:active:text-secondary-400"
href="#!"
>3</a
>
</li>
<li>
<a
class="relative block rounded bg-transparent px-3 py-1.5 text-sm text-surface transition duration-300 hover:bg-neutral-100 focus:bg-neutral-100 focus:text-secondary-800 focus:outline-none active:bg-neutral-100 active:text-secondary-800 dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 dark:focus:text-secondary-400 dark:active:bg-neutral-700 dark:active:text-secondary-400"
href="#!"
>Next</a
>
</li>
</ul>
</nav>
<!-- /Second navigation element with secondary theme -->
<!-- Third navigation element with success theme -->
<nav aria-label="Page navigation example">
<ul class="list-style-none mb-6 flex">
<li>
<a
class="pointer-events-none relative block rounded bg-transparent px-3 py-1.5 text-sm text-surface/50 transition duration-300 dark:text-neutral-400"
>Previous</a
>
</li>
<li>
<a
class="relative block rounded bg-transparent px-3 py-1.5 text-sm text-surface transition duration-300 hover:bg-neutral-100 focus:bg-neutral-100 focus:text-success-700 focus:outline-none active:bg-neutral-100 active:text-success-700 dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 dark:focus:text-success-500 dark:active:bg-neutral-700 dark:active:text-success-500"
href="#!"
>1</a
>
</li>
<li aria-current="page">
<a
class="relative block rounded bg-success-100 px-3 py-1.5 text-sm font-medium text-success-700 transition duration-300 focus:outline-none dark:bg-green-950 dark:text-success-500"
href="#!"
>2
<span
class="absolute -m-px h-px w-px overflow-hidden whitespace-nowrap border-0 p-0 [clip:rect(0,0,0,0)]"
>(current)</span
>
</a>
</li>
<li>
<a
class="relative block rounded bg-transparent px-3 py-1.5 text-sm text-surface transition duration-300 hover:bg-neutral-100 focus:bg-neutral-100 focus:text-success-700 focus:outline-none active:bg-neutral-100 active:text-success-700 dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 dark:focus:text-success-500 dark:active:bg-neutral-700 dark:active:text-success-500"
href="#!"
>3</a
>
</li>
<li>
<a
class="relative block rounded bg-transparent px-3 py-1.5 text-sm text-surface transition duration-300 hover:bg-neutral-100 focus:bg-neutral-100 focus:text-success-700 focus:outline-none active:bg-neutral-100 active:text-success-700 dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 dark:focus:text-success-500 dark:active:bg-neutral-700 dark:active:text-success-500"
href="#!"
>Next</a
>
</li>
</ul>
</nav>
<!-- /Third navigation element with success theme -->
<!-- Fourth navigation element with danger theme -->
<nav aria-label="Page navigation example">
<ul class="list-style-none mb-6 flex">
<li>
<a
class="pointer-events-none relative block rounded bg-transparent px-3 py-1.5 text-sm text-surface/50 transition duration-300 dark:text-neutral-400"
>Previous</a
>
</li>
<li>
<a
class="relative block rounded bg-transparent px-3 py-1.5 text-sm text-surface transition duration-300 hover:bg-neutral-100 focus:bg-neutral-100 focus:text-danger-700 focus:outline-none active:bg-neutral-100 active:text-danger-700 dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 dark:focus:text-danger-500 dark:active:bg-neutral-700 dark:active:text-danger-500"
href="#!"
>1</a
>
</li>
<li aria-current="page">
<a
class="relative block rounded bg-danger-100 px-3 py-1.5 text-sm font-medium text-danger-700 transition duration-300 focus:outline-none dark:bg-[#2c0f14] dark:text-danger-500"
href="#!"
>2
<span
class="absolute -m-px h-px w-px overflow-hidden whitespace-nowrap border-0 p-0 [clip:rect(0,0,0,0)]"
>(current)</span
>
</a>
</li>
<li>
<a
class="relative block rounded bg-transparent px-3 py-1.5 text-sm text-surface transition duration-300 hover:bg-neutral-100 focus:bg-neutral-100 focus:text-danger-700 focus:outline-none active:bg-neutral-100 active:text-danger-700 dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 dark:focus:text-danger-500 dark:active:bg-neutral-700 dark:active:text-danger-500"
href="#!"
>3</a
>
</li>
<li>
<a
class="relative block rounded bg-transparent px-3 py-1.5 text-sm text-surface transition duration-300 hover:bg-neutral-100 focus:bg-neutral-100 focus:text-danger-700 focus:outline-none active:bg-neutral-100 active:text-danger-700 dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 dark:focus:text-danger-500 dark:active:bg-neutral-700 dark:active:text-danger-500"
href="#!"
>Next</a
>
</li>
</ul>
</nav>
<!-- /Fourth navigation element with danger theme -->
<!-- Fifth navigation element with warning theme -->
<nav aria-label="Page navigation example">
<ul class="list-style-none mb-6 flex">
<li>
<a
class="pointer-events-none relative block rounded bg-transparent px-3 py-1.5 text-sm text-surface/50 transition duration-300 dark:text-neutral-400"
>Previous</a
>
</li>
<li>
<a
class="relative block rounded bg-transparent px-3 py-1.5 text-sm text-surface transition duration-300 hover:bg-neutral-100 focus:bg-neutral-100 focus:text-warning-800 focus:outline-none active:bg-neutral-100 active:text-warning-800 dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 dark:focus:text-warning-500 dark:active:bg-neutral-700 dark:active:text-warning-500"
href="#!"
>1</a
>
</li>
<li aria-current="page">
<a
class="relative block rounded bg-warning-100 px-3 py-1.5 text-sm font-medium text-warning-800 transition duration-300 focus:outline-none dark:bg-[#2e2005] dark:text-warning-500"
href="#!"
>2
<span
class="absolute -m-px h-px w-px overflow-hidden whitespace-nowrap border-0 p-0 [clip:rect(0,0,0,0)]"
>(current)</span
>
</a>
</li>
<li>
<a
class="relative block rounded bg-transparent px-3 py-1.5 text-sm text-surface transition duration-300 hover:bg-neutral-100 focus:bg-neutral-100 focus:text-warning-800 focus:outline-none active:bg-neutral-100 active:text-warning-800 dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 dark:focus:text-warning-500 dark:active:bg-neutral-700 dark:active:text-warning-500"
href="#!"
>3</a
>
</li>
<li>
<a
class="relative block rounded bg-transparent px-3 py-1.5 text-sm text-surface transition duration-300 hover:bg-neutral-100 focus:bg-neutral-100 focus:text-warning-800 focus:outline-none active:bg-neutral-100 active:text-warning-800 dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 dark:focus:text-warning-500 dark:active:bg-neutral-700 dark:active:text-warning-500"
href="#!"
>Next</a
>
</li>
</ul>
</nav>
<!-- /Fifth navigation element with warning theme -->
<!-- Sixth navigation element with info theme -->
<nav aria-label="Page navigation example">
<ul class="list-style-none mb-6 flex">
<li>
<a
class="pointer-events-none relative block rounded bg-transparent px-3 py-1.5 text-sm text-surface/50 transition duration-300 dark:text-neutral-400"
>Previous</a
>
</li>
<li>
<a
class="relative block rounded bg-transparent px-3 py-1.5 text-sm text-surface transition duration-300 hover:bg-neutral-100 focus:bg-neutral-100 focus:text-info-800 focus:outline-none active:bg-neutral-100 active:text-info-800 dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 dark:focus:text-info-500 dark:active:bg-neutral-700 dark:active:text-info-500"
href="#!"
>1</a
>
</li>
<li aria-current="page">
<a
class="relative block rounded bg-info-100 px-3 py-1.5 text-sm font-medium text-info-800 transition duration-300 focus:outline-none dark:bg-[#11242a] dark:text-info-500"
href="#!"
>2
<span
class="absolute -m-px h-px w-px overflow-hidden whitespace-nowrap border-0 p-0 [clip:rect(0,0,0,0)]"
>(current)</span
>
</a>
</li>
<li>
<a
class="relative block rounded bg-transparent px-3 py-1.5 text-sm text-surface transition duration-300 hover:bg-neutral-100 focus:bg-neutral-100 focus:text-info-800 focus:outline-none active:bg-neutral-100 active:text-info-800 dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 dark:focus:text-info-500 dark:active:bg-neutral-700 dark:active:text-info-500"
href="#!"
>3</a
>
</li>
<li>
<a
class="relative block rounded bg-transparent px-3 py-1.5 text-sm text-surface transition duration-300 hover:bg-neutral-100 focus:bg-neutral-100 focus:text-info-800 focus:outline-none active:bg-neutral-100 active:text-info-800 dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 dark:focus:text-info-500 dark:active:bg-neutral-700 dark:active:text-info-500"
href="#!"
>Next</a
>
</li>
</ul>
</nav>
<!-- /Sixth navigation element with info theme -->
<!-- Seventh navigation element with neutral-50 theme -->
<nav aria-label="Page navigation example">
<ul class="list-style-none mb-6 flex">
<li>
<a
class="pointer-events-none relative block rounded bg-transparent px-3 py-1.5 text-sm text-surface/50 transition duration-300 dark:text-neutral-400"
>Previous</a
>
</li>
<li>
<a
class="relative block rounded bg-transparent px-3 py-1.5 text-sm text-surface transition duration-300 hover:bg-neutral-100 focus:bg-neutral-100 focus:text-zinc-600 focus:outline-none active:bg-neutral-100 active:text-zinc-600 dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 dark:focus:text-neutral-100 dark:active:bg-neutral-700 dark:active:text-neutral-100"
href="#!"
>1</a
>
</li>
<li aria-current="page">
<a
class="relative block rounded bg-neutral-50 px-3 py-1.5 text-sm font-medium text-zinc-600 transition duration-300 focus:outline-none dark:bg-neutral-700 dark:text-neutral-100"
href="#!"
>2
<span
class="absolute -m-px h-px w-px overflow-hidden whitespace-nowrap border-0 p-0 [clip:rect(0,0,0,0)]"
>(current)</span
>
</a>
</li>
<li>
<a
class="relative block rounded bg-transparent px-3 py-1.5 text-sm text-surface transition duration-300 hover:bg-neutral-100 focus:bg-neutral-100 focus:text-zinc-600 focus:outline-none active:bg-neutral-100 active:text-zinc-600 dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 dark:focus:text-neutral-100 dark:active:bg-neutral-700 dark:active:text-neutral-100"
href="#!"
>3</a
>
</li>
<li>
<a
class="relative block rounded bg-transparent px-3 py-1.5 text-sm text-surface transition duration-300 hover:bg-neutral-100 focus:bg-neutral-100 focus:text-zinc-600 focus:outline-none active:bg-neutral-100 active:text-zinc-600 dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 dark:focus:text-neutral-100 dark:active:bg-neutral-700 dark:active:text-neutral-100"
href="#!"
>Next</a
>
</li>
</ul>
</nav>
<!--/Seventh navigation element with neutral-50 theme -->
<!-- Eighth navigation element with neutral-800 theme -->
<nav aria-label="Page navigation example">
<ul class="list-style-none flex">
<li>
<a
class="pointer-events-none relative block rounded bg-transparent px-3 py-1.5 text-sm text-surface/50 transition duration-300 dark:text-neutral-400"
>Previous</a
>
</li>
<li>
<a
class="relative block rounded bg-transparent px-3 py-1.5 text-sm text-surface transition duration-300 hover:bg-neutral-100 focus:bg-neutral-100 focus:outline-none active:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 dark:active:bg-neutral-700"
href="#!"
>1</a
>
</li>
<li aria-current="page">
<a
class="relative block rounded bg-neutral-800 px-3 py-1.5 text-sm font-medium text-zinc-100 transition duration-300 focus:outline-none"
href="#!"
>2
<span
class="absolute -m-px h-px w-px overflow-hidden whitespace-nowrap border-0 p-0 [clip:rect(0,0,0,0)]"
>(current)</span
>
</a>
</li>
<li>
<a
class="relative block rounded bg-transparent px-3 py-1.5 text-sm text-surface transition duration-300 hover:bg-neutral-100 focus:bg-neutral-100 focus:outline-none active:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 dark:active:bg-neutral-700"
href="#!"
>3</a
>
</li>
<li>
<a
class="relative block rounded bg-transparent px-3 py-1.5 text-sm text-surface transition duration-300 hover:bg-neutral-100 focus:bg-neutral-100 focus:outline-none active:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 dark:active:bg-neutral-700"
href="#!"
>Next</a
>
</li>
</ul>
</nav>
<!-- Eighth navigation element with neutral-800 theme -->
Related resources
Tutorials:
Extended Docs:
colors
icons
breadcrumbs
footer
scrollspy
badges
button group
buttons
link
scroll back to top button
ripple
borders
center grid items
center text
colors
dark theme
display block
display flex
flexbox
icons
position
text color
text decoration