1
0
pines/elements/pagination-examples/example-01.html
2023-05-24 08:29:02 -04:00

52 lines
2.6 KiB
HTML

<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>