In this tutorial, we will explore simple pagination techniques, including pagination with icons, active states, previous and next buttons, disabled states, and pagination with active pages. All examples will utilize Tailwind CSS.
Example 1
Tailwind CSS Simple Pagination.
<nav class="flex justify-center my-8">
<ul class="flex space-x-2 items-center">
<li>
<a href="#" class="px-3 py-1 rounded-md bg-gray-200 text-gray-600 hover:bg-gray-300">1</a>
</li>
<li>
<a href="#" class="px-3 py-1 rounded-md bg-gray-200 text-gray-600 hover:bg-gray-300">2</a>
</li>
<li>
<a href="#" class="px-3 py-1 rounded-md bg-gray-200 text-gray-600 hover:bg-gray-300">3</a>
</li>
<li>
<a href="#" class="px-3 py-1 rounded-md bg-gray-200 text-gray-600 hover:bg-gray-300">4</a>
</li>
</ul>
</nav>
Example 2
Tailwind CSS Active State Pagination.
<nav class="flex justify-center my-8">
<ul class="flex space-x-2 items-center">
<li>
<a href="#" class="px-3 py-1 rounded-md bg-gray-200 text-gray-600 hover:bg-gray-300">1</a>
</li>
<li>
<a href="#" class="px-3 py-1 rounded-md bg-blue-500 text-white">2</a>
</li>
<li>
<a href="#" class="px-3 py-1 rounded-md bg-gray-200 text-gray-600 hover:bg-gray-300">3</a>
</li>
<li>
<a href="#" class="px-3 py-1 rounded-md bg-gray-200 text-gray-600 hover:bg-gray-300">4</a>
</li>
</ul>
</nav>
Example 3
Tailwind CSS Previous and Next Buttons Pagination.
<nav class="flex justify-center my-8">
<ul class="flex space-x-2 items-center">
<li>
<a href="#" class="px-3 py-1 rounded-md bg-gray-200 text-gray-600 hover:bg-gray-300">Previous</a>
</li>
<li>
<a href="#" class="px-3 py-1 rounded-md bg-gray-200 text-gray-600 hover:bg-gray-300">1</a>
</li>
<li>
<a href="#" class="px-3 py-1 rounded-md bg-gray-200 text-gray-600 hover:bg-gray-300">2</a>
</li>
<li>
<a href="#" class="px-3 py-1 rounded-md bg-gray-200 text-gray-600 hover:bg-gray-300">Next</a>
</li>
</ul>
</nav>
Example 4
Tailwind CSS Disabled State Pagination.
<nav class="flex justify-center my-8">
<ul class="flex space-x-2 items-center">
<li>
<a href="#" class="px-3 py-1 rounded-md bg-gray-200 text-gray-600 cursor-not-allowed">Previous</a>
</li>
<li>
<a href="#" class="px-3 py-1 rounded-md bg-gray-200 text-gray-600">1</a>
</li>
<li>
<a href="#" class="px-3 py-1 rounded-md bg-gray-200 text-gray-600 hover:bg-gray-300">2</a>
</li>
<li>
<a href="#" class="px-3 py-1 rounded-md bg-gray-200 text-gray-600 hover:bg-gray-300">Next</a>
</li>
</ul>
</nav>Example 5
Tailwind CSS Pagination with arrow icon.
<nav class="flex justify-center my-8">
<ul class="flex space-x-2 items-center">
<li>
<a href="#"
class="flex items-center px-3 py-1 rounded-md bg-gray-200 text-gray-700 hover:bg-gray-300 transition duration-300 ease-in-out">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd"
d="M10.293 3.293a1 1 0 0 1 1.414 1.414L7.414 10l4.293 4.293a1 1 0 1 1-1.414 1.414l-5-5a1 1 0 0 1 0-1.414l5-5a1 1 0 0 1 0 1.414z"
clip-rule="evenodd" />
</svg>
Previous
</a>
</li>
<li>
<a href="#"
class="px-3 py-1 rounded-md bg-gray-200 text-gray-700 hover:bg-gray-300 transition duration-300 ease-in-out">1</a>
</li>
<li>
<a href="#"
class="px-3 py-1 rounded-md bg-gray-200 text-gray-700 hover:bg-gray-300 transition duration-300 ease-in-out">2</a>
</li>
<li>
<a href="#"
class="px-3 py-1 rounded-md bg-gray-200 text-gray-700 hover:bg-gray-300 transition duration-300 ease-in-out">3</a>
</li>
<li>
<a href="#"
class="px-3 py-1 rounded-md bg-gray-200 text-gray-700 hover:bg-gray-300 transition duration-300 ease-in-out">4</a>
</li>
<li>
<a href="#"
class="flex items-center px-3 py-1 rounded-md bg-gray-200 text-gray-700 hover:bg-gray-300 transition duration-300 ease-in-out">
Next
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-4 h-4 ml-1">
<path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
</svg>
</a>
</li>
</ul>
</nav>
