Pagination
A pagination element that can be used to navigate through pages of content.
Tailwind Only
Copied!
Showing 1 to 10 of 89 results
<div class="flex items-center justify-between w-full h-16 px-3 border-t border-neutral-200">
<p class="pl-2 text-sm text-gray-700">Showing <span class="font-medium">1</span> to <span class="font-medium">10</span> of <span class="font-medium">89</span> results</p>
<nav>
<ul class="flex items-center text-sm leading-tight bg-white border divide-x rounded h-9 text-neutral-500 divide-neutral-200 border-neutral-200">
<li class="h-full">
<a href="#" class="relative inline-flex items-center h-full px-3 ml-0 rounded-l group hover:text-neutral-900">
<span>Previous</span>
</a>
</li>
<li class="hidden h-full md:block">
<a href="#" class="relative inline-flex items-center h-full px-3 text-neutral-900 group bg-gray-50">
<span>1</span>
<span class="box-content absolute bottom-0 left-0 w-full h-px -mx-px translate-y-px border-l border-r bg-neutral-900 border-neutral-900"></span>
</a>
</li>
<li class="hidden h-full md:block">
<a href="#" class="relative inline-flex items-center h-full px-3 group hover:text-neutral-900">
<span>2</span>
<span class="box-content absolute bottom-0 w-0 h-px -mx-px duration-200 ease-out translate-y-px border-transparent bg-neutral-900 group-hover:border-l group-hover:border-r group-hover:border-neutral-900 left-1/2 group-hover:left-0 group-hover:w-full"></span>
</a>
</li>
<li class="hidden h-full md:block">
<a href="#" class="relative inline-flex items-center h-full px-3 group hover:text-neutral-900">
<span>3</span>
<span class="box-content absolute bottom-0 w-0 h-px -mx-px duration-200 ease-out translate-y-px border-transparent bg-neutral-900 group-hover:border-l group-hover:border-r group-hover:border-neutral-900 left-1/2 group-hover:left-0 group-hover:w-full"></span>
</a>
</li>
<li class="hidden h-full md:block">
<div class="relative inline-flex items-center h-full px-2.5 group">
<span>...</span>
</div>
</li>
<li class="hidden h-full md:block">
<a href="#" class="relative inline-flex items-center h-full px-3 group hover:text-neutral-900">
<span>6</span>
<span class="box-content absolute bottom-0 w-0 h-px -mx-px duration-200 ease-out translate-y-px border-transparent bg-neutral-900 group-hover:border-l group-hover:border-r group-hover:border-neutral-900 left-1/2 group-hover:left-0 group-hover:w-full"></span>
</a>
</li>
<li class="hidden h-full md:block">
<a href="#" class="relative inline-flex items-center h-full px-3 group hover:text-neutral-900">
<span>7</span>
<span class="box-content absolute bottom-0 w-0 h-px -mx-px duration-200 ease-out translate-y-px border-transparent bg-neutral-900 group-hover:border-l group-hover:border-r group-hover:border-neutral-900 left-1/2 group-hover:left-0 group-hover:w-full"></span>
</a>
</li>
<li class="hidden h-full md:block">
<a href="#" class="relative inline-flex items-center h-full px-3 group hover:text-neutral-900">
<span>8</span>
<span class="box-content absolute bottom-0 w-0 h-px -mx-px duration-200 ease-out translate-y-px border-transparent bg-neutral-900 group-hover:border-l group-hover:border-r group-hover:border-neutral-900 left-1/2 group-hover:left-0 group-hover:w-full"></span>
</a>
</li>
<li class="h-full">
<a href="#" class="relative inline-flex items-center h-full px-3 rounded-r group hover:text-neutral-900">
<span>Next</span>
</a>
</li>
</ul>
</nav>
</div>Data
Below you will find the data properties available in the x-data attribute of this element.
This particular element does not contain any data, It holds within it only TailwindCSS classes. Ah, but fear not! Should you so desire, you have the power to infuse it with some dynamic magic. Simply add the `x-data` attribute and create your desired functionality.
More Examples
Below you will find more Pagination examples you may wish to use in your projects.
Copied!
Showing 1 to 10 of 89 results
<div class="flex items-center justify-between w-full h-16 px-3 border-t border-neutral-200">
<p class="pl-2 text-sm text-gray-700">Showing <span class="font-medium">1</span> to <span class="font-medium">10</span> of <span class="font-medium">89</span> results</p>
<nav>
<ul class="flex items-center text-sm leading-tight bg-white border border-neutral-200/70 rounded h-[34px] text-neutral-500">
<li class="h-full">
<a href="#" class="relative inline-flex items-center h-full px-3 rounded-l group hover:bg-blue-600 hover:text-white">
<span>Previous</span>
</a>
</li>
<li class="hidden h-full md:block">
<a href="#" class="relative inline-flex items-center h-full px-3 text-white bg-blue-600 group">
<span>1</span>
</a>
</li>
<li class="hidden h-full md:block">
<a href="#" class="relative inline-flex items-center h-full px-3 group hover:bg-blue-600 hover:text-white">
<span>2</span>
</a>
</li>
<li class="hidden h-full md:block">
<a href="#" class="relative inline-flex items-center h-full px-3 group hover:bg-blue-600 hover:text-white">
<span>3</span>
</a>
</li>
<li class="hidden h-full md:block">
<div class="relative inline-flex items-center h-full px-2.5 bg-neutral-100 group">
<span>...</span>
</div>
</li>
<li class="hidden h-full md:block">
<a href="#" class="relative inline-flex items-center h-full px-3 group hover:bg-blue-600 hover:text-white">
<span>6</span>
</a>
</li>
<li class="hidden h-full md:block">
<a href="#" class="relative inline-flex items-center h-full px-3 group hover:bg-blue-600 hover:text-white">
<span>7</span>
</a>
</li>
<li class="hidden h-full md:block">
<a href="#" class="relative inline-flex items-center h-full px-3 group hover:bg-blue-600 hover:text-white">
<span>8</span>
</a>
</li>
<li class="h-full">
<a href="#" class="relative inline-flex items-center h-full px-3 rounded-r group hover:bg-blue-600 hover:text-white">
<span>Next</span>
</a>
</li>
</ul>
</nav>
</div>
