Check out our pagination examples, and don’t forget to choose your color. Everything here is styled using Tailwind CSS.
Numbers
Simple
The following example only showcases some numbered pagination.
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blueGray-500 bg-white text-blueGray-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blueGray-500 bg-white text-blueGray-500">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blueGray-500 bg-white text-blueGray-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blueGray-500 bg-white text-blueGray-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blueGray-500 bg-white text-blueGray-500">
5
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-red-500 bg-white text-red-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-red-500 bg-white text-red-500">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-red-500 bg-white text-red-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-red-500 bg-white text-red-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-red-500 bg-white text-red-500">
5
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-orange-500 bg-white text-orange-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-orange-500 bg-white text-orange-500">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-orange-500 bg-white text-orange-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-orange-500 bg-white text-orange-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-orange-500 bg-white text-orange-500">
5
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-amber-500 bg-white text-amber-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-amber-500 bg-white text-amber-500">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-amber-500 bg-white text-amber-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-amber-500 bg-white text-amber-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-amber-500 bg-white text-amber-500">
5
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-emerald-500 bg-white text-emerald-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-emerald-500 bg-white text-emerald-500">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-emerald-500 bg-white text-emerald-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-emerald-500 bg-white text-emerald-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-emerald-500 bg-white text-emerald-500">
5
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-teal-500 bg-white text-teal-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-teal-500 bg-white text-teal-500">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-teal-500 bg-white text-teal-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-teal-500 bg-white text-teal-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-teal-500 bg-white text-teal-500">
5
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-lightBlue-500 bg-white text-lightBlue-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-lightBlue-500 bg-white text-lightBlue-500">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-lightBlue-500 bg-white text-lightBlue-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-lightBlue-500 bg-white text-lightBlue-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-lightBlue-500 bg-white text-lightBlue-500">
5
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-500 bg-white text-indigo-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-500 bg-white text-indigo-500">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-500 bg-white text-indigo-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-500 bg-white text-indigo-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-500 bg-white text-indigo-500">
5
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-purple-500 bg-white text-purple-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-purple-500 bg-white text-purple-500">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-purple-500 bg-white text-purple-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-purple-500 bg-white text-purple-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-purple-500 bg-white text-purple-500">
5
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-pink-500 bg-white text-pink-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-pink-500 bg-white text-pink-500">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-pink-500 bg-white text-pink-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-pink-500 bg-white text-pink-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-pink-500 bg-white text-pink-500">
5
</a>
</li>
</ul>
</nav>
</div>
Active states
You can also modify one of the elements to show your user the active content/page.
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blueGray-500 text-white bg-blueGray-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blueGray-500 bg-white text-blueGray-500">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blueGray-500 bg-white text-blueGray-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blueGray-500 bg-white text-blueGray-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blueGray-500 bg-white text-blueGray-500">
5
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-red-500 text-white bg-red-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-red-500 bg-white text-red-500">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-red-500 bg-white text-red-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-red-500 bg-white text-red-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-red-500 bg-white text-red-500">
5
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-orange-500 text-white bg-orange-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-orange-500 bg-white text-orange-500">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-orange-500 bg-white text-orange-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-orange-500 bg-white text-orange-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-orange-500 bg-white text-orange-500">
5
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-amber-500 text-white bg-amber-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-amber-500 bg-white text-amber-500">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-amber-500 bg-white text-amber-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-amber-500 bg-white text-amber-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-amber-500 bg-white text-amber-500">
5
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-emerald-500 text-white bg-emerald-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-emerald-500 bg-white text-emerald-500">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-emerald-500 bg-white text-emerald-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-emerald-500 bg-white text-emerald-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-emerald-500 bg-white text-emerald-500">
5
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-teal-500 text-white bg-teal-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-teal-500 bg-white text-teal-500">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-teal-500 bg-white text-teal-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-teal-500 bg-white text-teal-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-teal-500 bg-white text-teal-500">
5
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-lightBlue-500 text-white bg-lightBlue-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-lightBlue-500 bg-white text-lightBlue-500">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-lightBlue-500 bg-white text-lightBlue-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-lightBlue-500 bg-white text-lightBlue-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-lightBlue-500 bg-white text-lightBlue-500">
5
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-500 text-white bg-indigo-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-500 bg-white text-indigo-500">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-500 bg-white text-indigo-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-500 bg-white text-indigo-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-500 bg-white text-indigo-500">
5
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-purple-500 text-white bg-purple-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-purple-500 bg-white text-purple-500">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-purple-500 bg-white text-purple-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-purple-500 bg-white text-purple-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-purple-500 bg-white text-purple-500">
5
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-pink-500 text-white bg-pink-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-pink-500 bg-white text-pink-500">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-pink-500 bg-white text-pink-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-pink-500 bg-white text-pink-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-pink-500 bg-white text-pink-500">
5
</a>
</li>
</ul>
</nav>
</div>
Disabled states
You can also provide a disabled state, showing your user that the content/page at hand cannot be viewed, or does not exist.
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blueGray-500 bg-white text-blueGray-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blueGray-200 text-white bg-blueGray-200">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blueGray-500 bg-white text-blueGray-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blueGray-500 bg-white text-blueGray-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blueGray-500 bg-white text-blueGray-500">
5
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-red-500 bg-white text-red-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-red-200 text-white bg-red-200">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-red-500 bg-white text-red-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-red-500 bg-white text-red-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-red-500 bg-white text-red-500">
5
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-orange-500 bg-white text-orange-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-orange-200 text-white bg-orange-200">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-orange-500 bg-white text-orange-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-orange-500 bg-white text-orange-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-orange-500 bg-white text-orange-500">
5
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-amber-500 bg-white text-amber-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-amber-200 text-white bg-amber-200">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-amber-500 bg-white text-amber-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-amber-500 bg-white text-amber-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-amber-500 bg-white text-amber-500">
5
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-emerald-500 bg-white text-emerald-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-emerald-200 text-white bg-emerald-200">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-emerald-500 bg-white text-emerald-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-emerald-500 bg-white text-emerald-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-emerald-500 bg-white text-emerald-500">
5
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-teal-500 bg-white text-teal-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-teal-200 text-white bg-teal-200">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-teal-500 bg-white text-teal-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-teal-500 bg-white text-teal-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-teal-500 bg-white text-teal-500">
5
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-lightBlue-500 bg-white text-lightBlue-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-lightBlue-200 text-white bg-lightBlue-200">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-lightBlue-500 bg-white text-lightBlue-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-lightBlue-500 bg-white text-lightBlue-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-lightBlue-500 bg-white text-lightBlue-500">
5
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-500 bg-white text-indigo-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-200 text-white bg-indigo-200">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-500 bg-white text-indigo-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-500 bg-white text-indigo-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-500 bg-white text-indigo-500">
5
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-purple-500 bg-white text-purple-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-purple-200 text-white bg-purple-200">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-purple-500 bg-white text-purple-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-purple-500 bg-white text-purple-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-purple-500 bg-white text-purple-500">
5
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-pink-500 bg-white text-pink-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-pink-200 text-white bg-pink-200">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-pink-500 bg-white text-pink-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-pink-500 bg-white text-pink-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-pink-500 bg-white text-pink-500">
5
</a>
</li>
</ul>
</nav>
</div>
Active and disabled states
Here is an example with both active and disabled states.
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blueGray-500 text-white bg-blueGray-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blueGray-200 text-white bg-blueGray-200">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blueGray-500 bg-white text-blueGray-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blueGray-500 bg-white text-blueGray-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blueGray-500 bg-white text-blueGray-500">
5
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-red-500 text-white bg-red-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-red-200 text-white bg-red-200">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-red-500 bg-white text-red-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-red-500 bg-white text-red-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-red-500 bg-white text-red-500">
5
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-orange-500 text-white bg-orange-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-orange-200 text-white bg-orange-200">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-orange-500 bg-white text-orange-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-orange-500 bg-white text-orange-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-orange-500 bg-white text-orange-500">
5
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-amber-500 text-white bg-amber-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-amber-200 text-white bg-amber-200">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-amber-500 bg-white text-amber-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-amber-500 bg-white text-amber-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-amber-500 bg-white text-amber-500">
5
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-emerald-500 text-white bg-emerald-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-emerald-200 text-white bg-emerald-200">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-emerald-500 bg-white text-emerald-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-emerald-500 bg-white text-emerald-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-emerald-500 bg-white text-emerald-500">
5
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-teal-500 text-white bg-teal-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-teal-200 text-white bg-teal-200">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-teal-500 bg-white text-teal-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-teal-500 bg-white text-teal-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-teal-500 bg-white text-teal-500">
5
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-lightBlue-500 text-white bg-lightBlue-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-lightBlue-200 text-white bg-lightBlue-200">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-lightBlue-500 bg-white text-lightBlue-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-lightBlue-500 bg-white text-lightBlue-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-lightBlue-500 bg-white text-lightBlue-500">
5
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-500 text-white bg-indigo-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-200 text-white bg-indigo-200">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-500 bg-white text-indigo-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-500 bg-white text-indigo-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-500 bg-white text-indigo-500">
5
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-purple-500 text-white bg-purple-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-purple-200 text-white bg-purple-200">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-purple-500 bg-white text-purple-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-purple-500 bg-white text-purple-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-purple-500 bg-white text-purple-500">
5
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-pink-500 text-white bg-pink-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-pink-200 text-white bg-pink-200">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-pink-500 bg-white text-pink-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-pink-500 bg-white text-pink-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-pink-500 bg-white text-pink-500">
5
</a>
</li>
</ul>
</nav>
</div>
Previous and next icons
Simple
The following example only showcases some numbered pagination.
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blueGray-500 bg-white text-blueGray-500">
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blueGray-500 bg-white text-blueGray-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blueGray-500 bg-white text-blueGray-500">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blueGray-500 bg-white text-blueGray-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blueGray-500 bg-white text-blueGray-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blueGray-500 bg-white text-blueGray-500">
5
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blueGray-500 bg-white text-blueGray-500">
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-red-500 bg-white text-red-500">
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-red-500 bg-white text-red-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-red-500 bg-white text-red-500">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-red-500 bg-white text-red-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-red-500 bg-white text-red-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-red-500 bg-white text-red-500">
5
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-red-500 bg-white text-red-500">
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-orange-500 bg-white text-orange-500">
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-orange-500 bg-white text-orange-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-orange-500 bg-white text-orange-500">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-orange-500 bg-white text-orange-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-orange-500 bg-white text-orange-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-orange-500 bg-white text-orange-500">
5
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-orange-500 bg-white text-orange-500">
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-amber-500 bg-white text-amber-500">
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-amber-500 bg-white text-amber-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-amber-500 bg-white text-amber-500">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-amber-500 bg-white text-amber-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-amber-500 bg-white text-amber-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-amber-500 bg-white text-amber-500">
5
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-amber-500 bg-white text-amber-500">
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-emerald-500 bg-white text-emerald-500">
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-emerald-500 bg-white text-emerald-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-emerald-500 bg-white text-emerald-500">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-emerald-500 bg-white text-emerald-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-emerald-500 bg-white text-emerald-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-emerald-500 bg-white text-emerald-500">
5
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-emerald-500 bg-white text-emerald-500">
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-teal-500 bg-white text-teal-500">
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-teal-500 bg-white text-teal-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-teal-500 bg-white text-teal-500">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-teal-500 bg-white text-teal-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-teal-500 bg-white text-teal-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-teal-500 bg-white text-teal-500">
5
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-teal-500 bg-white text-teal-500">
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-lightBlue-500 bg-white text-lightBlue-500">
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-lightBlue-500 bg-white text-lightBlue-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-lightBlue-500 bg-white text-lightBlue-500">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-lightBlue-500 bg-white text-lightBlue-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-lightBlue-500 bg-white text-lightBlue-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-lightBlue-500 bg-white text-lightBlue-500">
5
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-lightBlue-500 bg-white text-lightBlue-500">
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-500 bg-white text-indigo-500">
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-500 bg-white text-indigo-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-500 bg-white text-indigo-500">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-500 bg-white text-indigo-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-500 bg-white text-indigo-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-500 bg-white text-indigo-500">
5
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-500 bg-white text-indigo-500">
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-purple-500 bg-white text-purple-500">
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-purple-500 bg-white text-purple-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-purple-500 bg-white text-purple-500">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-purple-500 bg-white text-purple-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-purple-500 bg-white text-purple-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-purple-500 bg-white text-purple-500">
5
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-purple-500 bg-white text-purple-500">
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-pink-500 bg-white text-pink-500">
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-pink-500 bg-white text-pink-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-pink-500 bg-white text-pink-500">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-pink-500 bg-white text-pink-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-pink-500 bg-white text-pink-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-pink-500 bg-white text-pink-500">
5
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-pink-500 bg-white text-pink-500">
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
</ul>
</nav>
</div>
Active states
You can also modify one of the elements to show your user the active content/page.
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blueGray-500 bg-white text-blueGray-500">
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blueGray-500 text-white bg-blueGray-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blueGray-500 bg-white text-blueGray-500">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blueGray-500 bg-white text-blueGray-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blueGray-500 bg-white text-blueGray-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blueGray-500 bg-white text-blueGray-500">
5
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blueGray-500 bg-white text-blueGray-500">
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-red-500 bg-white text-red-500">
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-red-500 text-white bg-red-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-red-500 bg-white text-red-500">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-red-500 bg-white text-red-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-red-500 bg-white text-red-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-red-500 bg-white text-red-500">
5
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-red-500 bg-white text-red-500">
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-orange-500 bg-white text-orange-500">
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-orange-500 text-white bg-orange-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-orange-500 bg-white text-orange-500">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-orange-500 bg-white text-orange-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-orange-500 bg-white text-orange-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-orange-500 bg-white text-orange-500">
5
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-orange-500 bg-white text-orange-500">
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-amber-500 bg-white text-amber-500">
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-amber-500 text-white bg-amber-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-amber-500 bg-white text-amber-500">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-amber-500 bg-white text-amber-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-amber-500 bg-white text-amber-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-amber-500 bg-white text-amber-500">
5
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-amber-500 bg-white text-amber-500">
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-emerald-500 bg-white text-emerald-500">
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-emerald-500 text-white bg-emerald-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-emerald-500 bg-white text-emerald-500">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-emerald-500 bg-white text-emerald-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-emerald-500 bg-white text-emerald-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-emerald-500 bg-white text-emerald-500">
5
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-emerald-500 bg-white text-emerald-500">
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-teal-500 bg-white text-teal-500">
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-teal-500 text-white bg-teal-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-teal-500 bg-white text-teal-500">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-teal-500 bg-white text-teal-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-teal-500 bg-white text-teal-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-teal-500 bg-white text-teal-500">
5
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-teal-500 bg-white text-teal-500">
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-lightBlue-500 bg-white text-lightBlue-500">
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-lightBlue-500 text-white bg-lightBlue-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-lightBlue-500 bg-white text-lightBlue-500">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-lightBlue-500 bg-white text-lightBlue-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-lightBlue-500 bg-white text-lightBlue-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-lightBlue-500 bg-white text-lightBlue-500">
5
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-lightBlue-500 bg-white text-lightBlue-500">
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-500 bg-white text-indigo-500">
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-500 text-white bg-indigo-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-500 bg-white text-indigo-500">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-500 bg-white text-indigo-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-500 bg-white text-indigo-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-500 bg-white text-indigo-500">
5
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-500 bg-white text-indigo-500">
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-purple-500 bg-white text-purple-500">
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-purple-500 text-white bg-purple-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-purple-500 bg-white text-purple-500">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-purple-500 bg-white text-purple-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-purple-500 bg-white text-purple-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-purple-500 bg-white text-purple-500">
5
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-purple-500 bg-white text-purple-500">
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-pink-500 bg-white text-pink-500">
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-pink-500 text-white bg-pink-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-pink-500 bg-white text-pink-500">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-pink-500 bg-white text-pink-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-pink-500 bg-white text-pink-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-pink-500 bg-white text-pink-500">
5
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-pink-500 bg-white text-pink-500">
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
</ul>
</nav>
</div>
Disabled states
You can also provide a disabled state, showing your user that the content/page at hand cannot be viewed, or does not exist.
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blueGray-200 text-white bg-blueGray-200">
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blueGray-500 bg-white text-blueGray-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blueGray-200 text-white bg-blueGray-200">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blueGray-500 bg-white text-blueGray-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blueGray-500 bg-white text-blueGray-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blueGray-500 bg-white text-blueGray-500">
5
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blueGray-500 bg-white text-blueGray-500">
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-red-200 text-white bg-red-200">
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-red-500 bg-white text-red-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-red-200 text-white bg-red-200">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-red-500 bg-white text-red-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-red-500 bg-white text-red-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-red-500 bg-white text-red-500">
5
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-red-500 bg-white text-red-500">
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-orange-200 text-white bg-orange-200">
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-orange-500 bg-white text-orange-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-orange-200 text-white bg-orange-200">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-orange-500 bg-white text-orange-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-orange-500 bg-white text-orange-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-orange-500 bg-white text-orange-500">
5
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-orange-500 bg-white text-orange-500">
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-amber-200 text-white bg-amber-200">
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-amber-500 bg-white text-amber-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-amber-200 text-white bg-amber-200">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-amber-500 bg-white text-amber-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-amber-500 bg-white text-amber-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-amber-500 bg-white text-amber-500">
5
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-amber-500 bg-white text-amber-500">
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-emerald-200 text-white bg-emerald-200">
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-emerald-500 bg-white text-emerald-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-emerald-200 text-white bg-emerald-200">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-emerald-500 bg-white text-emerald-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-emerald-500 bg-white text-emerald-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-emerald-500 bg-white text-emerald-500">
5
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-emerald-500 bg-white text-emerald-500">
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-teal-200 text-white bg-teal-200">
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-teal-500 bg-white text-teal-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-teal-200 text-white bg-teal-200">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-teal-500 bg-white text-teal-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-teal-500 bg-white text-teal-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-teal-500 bg-white text-teal-500">
5
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-teal-500 bg-white text-teal-500">
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-lightBlue-200 text-white bg-lightBlue-200">
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-lightBlue-500 bg-white text-lightBlue-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-lightBlue-200 text-white bg-lightBlue-200">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-lightBlue-500 bg-white text-lightBlue-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-lightBlue-500 bg-white text-lightBlue-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-lightBlue-500 bg-white text-lightBlue-500">
5
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-lightBlue-500 bg-white text-lightBlue-500">
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-200 text-white bg-indigo-200">
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-500 bg-white text-indigo-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-200 text-white bg-indigo-200">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-500 bg-white text-indigo-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-500 bg-white text-indigo-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-500 bg-white text-indigo-500">
5
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-500 bg-white text-indigo-500">
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-purple-200 text-white bg-purple-200">
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-purple-500 bg-white text-purple-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-purple-200 text-white bg-purple-200">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-purple-500 bg-white text-purple-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-purple-500 bg-white text-purple-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-purple-500 bg-white text-purple-500">
5
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-purple-500 bg-white text-purple-500">
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-pink-200 text-white bg-pink-200">
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-pink-500 bg-white text-pink-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-pink-200 text-white bg-pink-200">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-pink-500 bg-white text-pink-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-pink-500 bg-white text-pink-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-pink-500 bg-white text-pink-500">
5
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-pink-500 bg-white text-pink-500">
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
</ul>
</nav>
</div>
Active and disabled states
Here is an example with both active and disabled states.
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blueGray-200 text-white bg-blueGray-200">
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blueGray-500 text-white bg-blueGray-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blueGray-200 text-white bg-blueGray-200">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blueGray-500 bg-white text-blueGray-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blueGray-500 bg-white text-blueGray-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blueGray-500 bg-white text-blueGray-500">
5
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blueGray-500 bg-white text-blueGray-500">
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-red-200 text-white bg-red-200">
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-red-500 text-white bg-red-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-red-200 text-white bg-red-200">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-red-500 bg-white text-red-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-red-500 bg-white text-red-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-red-500 bg-white text-red-500">
5
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-red-500 bg-white text-red-500">
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-orange-200 text-white bg-orange-200">
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-orange-500 text-white bg-orange-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-orange-200 text-white bg-orange-200">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-orange-500 bg-white text-orange-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-orange-500 bg-white text-orange-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-orange-500 bg-white text-orange-500">
5
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-orange-500 bg-white text-orange-500">
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-amber-200 text-white bg-amber-200">
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-amber-500 text-white bg-amber-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-amber-200 text-white bg-amber-200">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-amber-500 bg-white text-amber-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-amber-500 bg-white text-amber-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-amber-500 bg-white text-amber-500">
5
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-amber-500 bg-white text-amber-500">
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-emerald-200 text-white bg-emerald-200">
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-emerald-500 text-white bg-emerald-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-emerald-200 text-white bg-emerald-200">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-emerald-500 bg-white text-emerald-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-emerald-500 bg-white text-emerald-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-emerald-500 bg-white text-emerald-500">
5
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-emerald-500 bg-white text-emerald-500">
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-teal-200 text-white bg-teal-200">
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-teal-500 text-white bg-teal-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-teal-200 text-white bg-teal-200">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-teal-500 bg-white text-teal-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-teal-500 bg-white text-teal-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-teal-500 bg-white text-teal-500">
5
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-teal-500 bg-white text-teal-500">
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-lightBlue-200 text-white bg-lightBlue-200">
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-lightBlue-500 text-white bg-lightBlue-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-lightBlue-200 text-white bg-lightBlue-200">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-lightBlue-500 bg-white text-lightBlue-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-lightBlue-500 bg-white text-lightBlue-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-lightBlue-500 bg-white text-lightBlue-500">
5
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-lightBlue-500 bg-white text-lightBlue-500">
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-200 text-white bg-indigo-200">
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-500 text-white bg-indigo-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-200 text-white bg-indigo-200">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-500 bg-white text-indigo-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-500 bg-white text-indigo-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-500 bg-white text-indigo-500">
5
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-500 bg-white text-indigo-500">
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-purple-200 text-white bg-purple-200">
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-purple-500 text-white bg-purple-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-purple-200 text-white bg-purple-200">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-purple-500 bg-white text-purple-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-purple-500 bg-white text-purple-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-purple-500 bg-white text-purple-500">
5
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-purple-500 bg-white text-purple-500">
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-pink-200 text-white bg-pink-200">
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-pink-500 text-white bg-pink-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-pink-200 text-white bg-pink-200">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-pink-500 bg-white text-pink-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-pink-500 bg-white text-pink-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-pink-500 bg-white text-pink-500">
5
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-pink-500 bg-white text-pink-500">
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
</ul>
</nav>
</div>
First and last icons
Simple
The following example only showcases some numbered pagination.
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blueGray-500 bg-white text-blueGray-500">
<i class="fas fa-chevron-left -ml-px"></i>
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blueGray-500 bg-white text-blueGray-500">
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blueGray-500 bg-white text-blueGray-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blueGray-500 bg-white text-blueGray-500">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blueGray-500 bg-white text-blueGray-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blueGray-500 bg-white text-blueGray-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blueGray-500 bg-white text-blueGray-500">
5
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blueGray-500 bg-white text-blueGray-500">
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blueGray-500 bg-white text-blueGray-500">
<i class="fas fa-chevron-right -mr-px"></i>
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-red-500 bg-white text-red-500">
<i class="fas fa-chevron-left -ml-px"></i>
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-red-500 bg-white text-red-500">
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-red-500 bg-white text-red-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-red-500 bg-white text-red-500">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-red-500 bg-white text-red-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-red-500 bg-white text-red-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-red-500 bg-white text-red-500">
5
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-red-500 bg-white text-red-500">
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-red-500 bg-white text-red-500">
<i class="fas fa-chevron-right -mr-px"></i>
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-orange-500 bg-white text-orange-500">
<i class="fas fa-chevron-left -ml-px"></i>
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-orange-500 bg-white text-orange-500">
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-orange-500 bg-white text-orange-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-orange-500 bg-white text-orange-500">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-orange-500 bg-white text-orange-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-orange-500 bg-white text-orange-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-orange-500 bg-white text-orange-500">
5
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-orange-500 bg-white text-orange-500">
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-orange-500 bg-white text-orange-500">
<i class="fas fa-chevron-right -mr-px"></i>
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-amber-500 bg-white text-amber-500">
<i class="fas fa-chevron-left -ml-px"></i>
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-amber-500 bg-white text-amber-500">
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-amber-500 bg-white text-amber-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-amber-500 bg-white text-amber-500">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-amber-500 bg-white text-amber-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-amber-500 bg-white text-amber-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-amber-500 bg-white text-amber-500">
5
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-amber-500 bg-white text-amber-500">
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-amber-500 bg-white text-amber-500">
<i class="fas fa-chevron-right -mr-px"></i>
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-emerald-500 bg-white text-emerald-500">
<i class="fas fa-chevron-left -ml-px"></i>
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-emerald-500 bg-white text-emerald-500">
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-emerald-500 bg-white text-emerald-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-emerald-500 bg-white text-emerald-500">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-emerald-500 bg-white text-emerald-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-emerald-500 bg-white text-emerald-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-emerald-500 bg-white text-emerald-500">
5
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-emerald-500 bg-white text-emerald-500">
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-emerald-500 bg-white text-emerald-500">
<i class="fas fa-chevron-right -mr-px"></i>
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-teal-500 bg-white text-teal-500">
<i class="fas fa-chevron-left -ml-px"></i>
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-teal-500 bg-white text-teal-500">
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-teal-500 bg-white text-teal-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-teal-500 bg-white text-teal-500">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-teal-500 bg-white text-teal-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-teal-500 bg-white text-teal-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-teal-500 bg-white text-teal-500">
5
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-teal-500 bg-white text-teal-500">
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-teal-500 bg-white text-teal-500">
<i class="fas fa-chevron-right -mr-px"></i>
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-lightBlue-500 bg-white text-lightBlue-500">
<i class="fas fa-chevron-left -ml-px"></i>
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-lightBlue-500 bg-white text-lightBlue-500">
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-lightBlue-500 bg-white text-lightBlue-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-lightBlue-500 bg-white text-lightBlue-500">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-lightBlue-500 bg-white text-lightBlue-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-lightBlue-500 bg-white text-lightBlue-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-lightBlue-500 bg-white text-lightBlue-500">
5
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-lightBlue-500 bg-white text-lightBlue-500">
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-lightBlue-500 bg-white text-lightBlue-500">
<i class="fas fa-chevron-right -mr-px"></i>
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-500 bg-white text-indigo-500">
<i class="fas fa-chevron-left -ml-px"></i>
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-500 bg-white text-indigo-500">
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-500 bg-white text-indigo-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-500 bg-white text-indigo-500">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-500 bg-white text-indigo-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-500 bg-white text-indigo-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-500 bg-white text-indigo-500">
5
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-500 bg-white text-indigo-500">
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-500 bg-white text-indigo-500">
<i class="fas fa-chevron-right -mr-px"></i>
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-purple-500 bg-white text-purple-500">
<i class="fas fa-chevron-left -ml-px"></i>
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-purple-500 bg-white text-purple-500">
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-purple-500 bg-white text-purple-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-purple-500 bg-white text-purple-500">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-purple-500 bg-white text-purple-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-purple-500 bg-white text-purple-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-purple-500 bg-white text-purple-500">
5
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-purple-500 bg-white text-purple-500">
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-purple-500 bg-white text-purple-500">
<i class="fas fa-chevron-right -mr-px"></i>
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-pink-500 bg-white text-pink-500">
<i class="fas fa-chevron-left -ml-px"></i>
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-pink-500 bg-white text-pink-500">
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-pink-500 bg-white text-pink-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-pink-500 bg-white text-pink-500">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-pink-500 bg-white text-pink-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-pink-500 bg-white text-pink-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-pink-500 bg-white text-pink-500">
5
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-pink-500 bg-white text-pink-500">
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-pink-500 bg-white text-pink-500">
<i class="fas fa-chevron-right -mr-px"></i>
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
</ul>
</nav>
</div>
Active states
You can also modify one of the elements to show your user the active content/page.
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blueGray-500 bg-white text-blueGray-500">
<i class="fas fa-chevron-left -ml-px"></i>
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blueGray-500 bg-white text-blueGray-500">
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blueGray-500 text-white bg-blueGray-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blueGray-500 bg-white text-blueGray-500">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blueGray-500 bg-white text-blueGray-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blueGray-500 bg-white text-blueGray-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blueGray-500 bg-white text-blueGray-500">
5
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blueGray-500 bg-white text-blueGray-500">
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blueGray-500 bg-white text-blueGray-500">
<i class="fas fa-chevron-right -mr-px"></i>
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-red-500 bg-white text-red-500">
<i class="fas fa-chevron-left -ml-px"></i>
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-red-500 bg-white text-red-500">
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-red-500 text-white bg-red-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-red-500 bg-white text-red-500">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-red-500 bg-white text-red-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-red-500 bg-white text-red-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-red-500 bg-white text-red-500">
5
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-red-500 bg-white text-red-500">
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-red-500 bg-white text-red-500">
<i class="fas fa-chevron-right -mr-px"></i>
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-orange-500 bg-white text-orange-500">
<i class="fas fa-chevron-left -ml-px"></i>
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-orange-500 bg-white text-orange-500">
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-orange-500 text-white bg-orange-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-orange-500 bg-white text-orange-500">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-orange-500 bg-white text-orange-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-orange-500 bg-white text-orange-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-orange-500 bg-white text-orange-500">
5
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-orange-500 bg-white text-orange-500">
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-orange-500 bg-white text-orange-500">
<i class="fas fa-chevron-right -mr-px"></i>
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-amber-500 bg-white text-amber-500">
<i class="fas fa-chevron-left -ml-px"></i>
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-amber-500 bg-white text-amber-500">
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-amber-500 text-white bg-amber-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-amber-500 bg-white text-amber-500">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-amber-500 bg-white text-amber-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-amber-500 bg-white text-amber-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-amber-500 bg-white text-amber-500">
5
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-amber-500 bg-white text-amber-500">
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-amber-500 bg-white text-amber-500">
<i class="fas fa-chevron-right -mr-px"></i>
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-emerald-500 bg-white text-emerald-500">
<i class="fas fa-chevron-left -ml-px"></i>
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-emerald-500 bg-white text-emerald-500">
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-emerald-500 text-white bg-emerald-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-emerald-500 bg-white text-emerald-500">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-emerald-500 bg-white text-emerald-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-emerald-500 bg-white text-emerald-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-emerald-500 bg-white text-emerald-500">
5
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-emerald-500 bg-white text-emerald-500">
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-emerald-500 bg-white text-emerald-500">
<i class="fas fa-chevron-right -mr-px"></i>
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-teal-500 bg-white text-teal-500">
<i class="fas fa-chevron-left -ml-px"></i>
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-teal-500 bg-white text-teal-500">
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-teal-500 text-white bg-teal-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-teal-500 bg-white text-teal-500">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-teal-500 bg-white text-teal-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-teal-500 bg-white text-teal-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-teal-500 bg-white text-teal-500">
5
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-teal-500 bg-white text-teal-500">
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-teal-500 bg-white text-teal-500">
<i class="fas fa-chevron-right -mr-px"></i>
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-lightBlue-500 bg-white text-lightBlue-500">
<i class="fas fa-chevron-left -ml-px"></i>
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-lightBlue-500 bg-white text-lightBlue-500">
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-lightBlue-500 text-white bg-lightBlue-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-lightBlue-500 bg-white text-lightBlue-500">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-lightBlue-500 bg-white text-lightBlue-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-lightBlue-500 bg-white text-lightBlue-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-lightBlue-500 bg-white text-lightBlue-500">
5
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-lightBlue-500 bg-white text-lightBlue-500">
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-lightBlue-500 bg-white text-lightBlue-500">
<i class="fas fa-chevron-right -mr-px"></i>
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-500 bg-white text-indigo-500">
<i class="fas fa-chevron-left -ml-px"></i>
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-500 bg-white text-indigo-500">
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-500 text-white bg-indigo-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-500 bg-white text-indigo-500">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-500 bg-white text-indigo-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-500 bg-white text-indigo-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-500 bg-white text-indigo-500">
5
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-500 bg-white text-indigo-500">
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-500 bg-white text-indigo-500">
<i class="fas fa-chevron-right -mr-px"></i>
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-purple-500 bg-white text-purple-500">
<i class="fas fa-chevron-left -ml-px"></i>
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-purple-500 bg-white text-purple-500">
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-purple-500 text-white bg-purple-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-purple-500 bg-white text-purple-500">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-purple-500 bg-white text-purple-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-purple-500 bg-white text-purple-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-purple-500 bg-white text-purple-500">
5
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-purple-500 bg-white text-purple-500">
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-purple-500 bg-white text-purple-500">
<i class="fas fa-chevron-right -mr-px"></i>
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-pink-500 bg-white text-pink-500">
<i class="fas fa-chevron-left -ml-px"></i>
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-pink-500 bg-white text-pink-500">
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-pink-500 text-white bg-pink-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-pink-500 bg-white text-pink-500">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-pink-500 bg-white text-pink-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-pink-500 bg-white text-pink-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-pink-500 bg-white text-pink-500">
5
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-pink-500 bg-white text-pink-500">
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-pink-500 bg-white text-pink-500">
<i class="fas fa-chevron-right -mr-px"></i>
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
</ul>
</nav>
</div>
Disabled states
You can also provide a disabled state, showing your user that the content/page at hand cannot be viewed, or does not exist.
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blueGray-200 text-white bg-blueGray-200">
<i class="fas fa-chevron-left -ml-px"></i>
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blueGray-200 text-white bg-blueGray-200">
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blueGray-500 bg-white text-blueGray-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blueGray-200 text-white bg-blueGray-200">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blueGray-500 bg-white text-blueGray-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blueGray-500 bg-white text-blueGray-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blueGray-500 bg-white text-blueGray-500">
5
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blueGray-500 bg-white text-blueGray-500">
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blueGray-500 bg-white text-blueGray-500">
<i class="fas fa-chevron-right -mr-px"></i>
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-red-200 text-white bg-red-200">
<i class="fas fa-chevron-left -ml-px"></i>
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-red-200 text-white bg-red-200">
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-red-500 bg-white text-red-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-red-200 text-white bg-red-200">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-red-500 bg-white text-red-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-red-500 bg-white text-red-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-red-500 bg-white text-red-500">
5
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-red-500 bg-white text-red-500">
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-red-500 bg-white text-red-500">
<i class="fas fa-chevron-right -mr-px"></i>
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-orange-200 text-white bg-orange-200">
<i class="fas fa-chevron-left -ml-px"></i>
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-orange-200 text-white bg-orange-200">
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-orange-500 bg-white text-orange-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-orange-200 text-white bg-orange-200">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-orange-500 bg-white text-orange-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-orange-500 bg-white text-orange-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-orange-500 bg-white text-orange-500">
5
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-orange-500 bg-white text-orange-500">
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-orange-500 bg-white text-orange-500">
<i class="fas fa-chevron-right -mr-px"></i>
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-amber-200 text-white bg-amber-200">
<i class="fas fa-chevron-left -ml-px"></i>
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-amber-200 text-white bg-amber-200">
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-amber-500 bg-white text-amber-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-amber-200 text-white bg-amber-200">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-amber-500 bg-white text-amber-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-amber-500 bg-white text-amber-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-amber-500 bg-white text-amber-500">
5
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-amber-500 bg-white text-amber-500">
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-amber-500 bg-white text-amber-500">
<i class="fas fa-chevron-right -mr-px"></i>
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-emerald-200 text-white bg-emerald-200">
<i class="fas fa-chevron-left -ml-px"></i>
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-emerald-200 text-white bg-emerald-200">
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-emerald-500 bg-white text-emerald-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-emerald-200 text-white bg-emerald-200">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-emerald-500 bg-white text-emerald-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-emerald-500 bg-white text-emerald-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-emerald-500 bg-white text-emerald-500">
5
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-emerald-500 bg-white text-emerald-500">
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-emerald-500 bg-white text-emerald-500">
<i class="fas fa-chevron-right -mr-px"></i>
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-teal-200 text-white bg-teal-200">
<i class="fas fa-chevron-left -ml-px"></i>
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-teal-200 text-white bg-teal-200">
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-teal-500 bg-white text-teal-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-teal-200 text-white bg-teal-200">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-teal-500 bg-white text-teal-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-teal-500 bg-white text-teal-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-teal-500 bg-white text-teal-500">
5
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-teal-500 bg-white text-teal-500">
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-teal-500 bg-white text-teal-500">
<i class="fas fa-chevron-right -mr-px"></i>
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-lightBlue-200 text-white bg-lightBlue-200">
<i class="fas fa-chevron-left -ml-px"></i>
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-lightBlue-200 text-white bg-lightBlue-200">
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-lightBlue-500 bg-white text-lightBlue-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-lightBlue-200 text-white bg-lightBlue-200">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-lightBlue-500 bg-white text-lightBlue-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-lightBlue-500 bg-white text-lightBlue-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-lightBlue-500 bg-white text-lightBlue-500">
5
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-lightBlue-500 bg-white text-lightBlue-500">
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-lightBlue-500 bg-white text-lightBlue-500">
<i class="fas fa-chevron-right -mr-px"></i>
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-200 text-white bg-indigo-200">
<i class="fas fa-chevron-left -ml-px"></i>
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-200 text-white bg-indigo-200">
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-500 bg-white text-indigo-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-200 text-white bg-indigo-200">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-500 bg-white text-indigo-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-500 bg-white text-indigo-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-500 bg-white text-indigo-500">
5
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-500 bg-white text-indigo-500">
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-500 bg-white text-indigo-500">
<i class="fas fa-chevron-right -mr-px"></i>
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-purple-200 text-white bg-purple-200">
<i class="fas fa-chevron-left -ml-px"></i>
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-purple-200 text-white bg-purple-200">
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-purple-500 bg-white text-purple-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-purple-200 text-white bg-purple-200">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-purple-500 bg-white text-purple-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-purple-500 bg-white text-purple-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-purple-500 bg-white text-purple-500">
5
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-purple-500 bg-white text-purple-500">
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-purple-500 bg-white text-purple-500">
<i class="fas fa-chevron-right -mr-px"></i>
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-pink-200 text-white bg-pink-200">
<i class="fas fa-chevron-left -ml-px"></i>
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-pink-200 text-white bg-pink-200">
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-pink-500 bg-white text-pink-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-pink-200 text-white bg-pink-200">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-pink-500 bg-white text-pink-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-pink-500 bg-white text-pink-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-pink-500 bg-white text-pink-500">
5
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-pink-500 bg-white text-pink-500">
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-pink-500 bg-white text-pink-500">
<i class="fas fa-chevron-right -mr-px"></i>
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
</ul>
</nav>
</div>
Active and disabled states
Here is an example with both active and disabled states.
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blueGray-200 text-white bg-blueGray-200">
<i class="fas fa-chevron-left -ml-px"></i>
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blueGray-200 text-white bg-blueGray-200">
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blueGray-500 text-white bg-blueGray-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blueGray-200 text-white bg-blueGray-200">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blueGray-500 bg-white text-blueGray-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blueGray-500 bg-white text-blueGray-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blueGray-500 bg-white text-blueGray-500">
5
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blueGray-500 bg-white text-blueGray-500">
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blueGray-500 bg-white text-blueGray-500">
<i class="fas fa-chevron-right -mr-px"></i>
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-red-200 text-white bg-red-200">
<i class="fas fa-chevron-left -ml-px"></i>
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-red-200 text-white bg-red-200">
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-red-500 text-white bg-red-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-red-200 text-white bg-red-200">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-red-500 bg-white text-red-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-red-500 bg-white text-red-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-red-500 bg-white text-red-500">
5
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-red-500 bg-white text-red-500">
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-red-500 bg-white text-red-500">
<i class="fas fa-chevron-right -mr-px"></i>
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-orange-200 text-white bg-orange-200">
<i class="fas fa-chevron-left -ml-px"></i>
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-orange-200 text-white bg-orange-200">
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-orange-500 text-white bg-orange-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-orange-200 text-white bg-orange-200">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-orange-500 bg-white text-orange-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-orange-500 bg-white text-orange-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-orange-500 bg-white text-orange-500">
5
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-orange-500 bg-white text-orange-500">
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-orange-500 bg-white text-orange-500">
<i class="fas fa-chevron-right -mr-px"></i>
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-amber-200 text-white bg-amber-200">
<i class="fas fa-chevron-left -ml-px"></i>
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-amber-200 text-white bg-amber-200">
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-amber-500 text-white bg-amber-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-amber-200 text-white bg-amber-200">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-amber-500 bg-white text-amber-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-amber-500 bg-white text-amber-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-amber-500 bg-white text-amber-500">
5
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-amber-500 bg-white text-amber-500">
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-amber-500 bg-white text-amber-500">
<i class="fas fa-chevron-right -mr-px"></i>
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-emerald-200 text-white bg-emerald-200">
<i class="fas fa-chevron-left -ml-px"></i>
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-emerald-200 text-white bg-emerald-200">
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-emerald-500 text-white bg-emerald-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-emerald-200 text-white bg-emerald-200">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-emerald-500 bg-white text-emerald-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-emerald-500 bg-white text-emerald-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-emerald-500 bg-white text-emerald-500">
5
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-emerald-500 bg-white text-emerald-500">
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-emerald-500 bg-white text-emerald-500">
<i class="fas fa-chevron-right -mr-px"></i>
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-teal-200 text-white bg-teal-200">
<i class="fas fa-chevron-left -ml-px"></i>
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-teal-200 text-white bg-teal-200">
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-teal-500 text-white bg-teal-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-teal-200 text-white bg-teal-200">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-teal-500 bg-white text-teal-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-teal-500 bg-white text-teal-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-teal-500 bg-white text-teal-500">
5
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-teal-500 bg-white text-teal-500">
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-teal-500 bg-white text-teal-500">
<i class="fas fa-chevron-right -mr-px"></i>
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-lightBlue-200 text-white bg-lightBlue-200">
<i class="fas fa-chevron-left -ml-px"></i>
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-lightBlue-200 text-white bg-lightBlue-200">
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-lightBlue-500 text-white bg-lightBlue-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-lightBlue-200 text-white bg-lightBlue-200">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-lightBlue-500 bg-white text-lightBlue-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-lightBlue-500 bg-white text-lightBlue-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-lightBlue-500 bg-white text-lightBlue-500">
5
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-lightBlue-500 bg-white text-lightBlue-500">
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-lightBlue-500 bg-white text-lightBlue-500">
<i class="fas fa-chevron-right -mr-px"></i>
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-200 text-white bg-indigo-200">
<i class="fas fa-chevron-left -ml-px"></i>
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-200 text-white bg-indigo-200">
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-500 text-white bg-indigo-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-200 text-white bg-indigo-200">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-500 bg-white text-indigo-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-500 bg-white text-indigo-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-500 bg-white text-indigo-500">
5
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-500 bg-white text-indigo-500">
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-indigo-500 bg-white text-indigo-500">
<i class="fas fa-chevron-right -mr-px"></i>
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-purple-200 text-white bg-purple-200">
<i class="fas fa-chevron-left -ml-px"></i>
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-purple-200 text-white bg-purple-200">
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-purple-500 text-white bg-purple-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-purple-200 text-white bg-purple-200">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-purple-500 bg-white text-purple-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-purple-500 bg-white text-purple-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-purple-500 bg-white text-purple-500">
5
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-purple-500 bg-white text-purple-500">
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-purple-500 bg-white text-purple-500">
<i class="fas fa-chevron-right -mr-px"></i>
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
</ul>
</nav>
</div>
<div class="py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-pink-200 text-white bg-pink-200">
<i class="fas fa-chevron-left -ml-px"></i>
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-pink-200 text-white bg-pink-200">
<i class="fas fa-chevron-left -ml-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-pink-500 text-white bg-pink-500">
1
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-pink-200 text-white bg-pink-200">
2
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-pink-500 bg-white text-pink-500">
3
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-pink-500 bg-white text-pink-500">
4
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-pink-500 bg-white text-pink-500">
5
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-pink-500 bg-white text-pink-500">
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
<li>
<a href="#pablo" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-pink-500 bg-white text-pink-500">
<i class="fas fa-chevron-right -mr-px"></i>
<i class="fas fa-chevron-right -mr-px"></i>
</a>
</li>
</ul>
</nav>
</div>