DOCUMENTATION

Pagination

A Tailwind CSS pagination component enables a user to choose a page they'd like to hop to from a range of pages provided at the top or the bottom of a webpage.

Examples


<nav class="relative flex">
    <a href="#"
        class="relative block px-3 py-0.5 text-sm  rounded-l text-blue-500 bg-white border-l border-t border-b  border-gray-300 focus:bg-gray-200 hover:bg-gray-200">
        1
    </a>
    <a href="#"
        class="relative block px-3 py-0.5 text-sm text-white bg-blue-600 border-l border-t border-b border-blue-600 ">
        2
    </a>
    <a href="#"
        class="relative block px-3 py-0.5 text-sm rounded-r text-blue-500 bg-white border-r border-t border-b border-gray-300 focus:bg-gray-200 hover:bg-gray-200">
        3
    </a>
</nav>
<nav class="relative flex mt-3">
    <a href="#"
        class="relative block px-4 py-1  text-blue-500 bg-white border-t border-b border-l border-gray-300 rounded-l-lg focus:bg-gray-200 hover:bg-gray-200">
        <span>«</span>
    </a>
    <a href="#"
        class="relative block px-4 py-1  text-blue-500 bg-white border-t border-b border-l border-gray-300 focus:bg-gray-200 hover:bg-gray-200">
        1
    </a>
    <a href="#"
        class="relative block px-4 py-1  text-blue-500 bg-white border-t border-b border-l border-gray-300 focus:bg-gray-200 hover:bg-gray-200">
        2
    </a>
    <a href="#"
        class="relative block px-4 py-1  text-blue-500 bg-white border border-t border-l border-gray-300 focus:bg-gray-200 hover:bg-gray-200">
        3
    </a>
    <a href="#"
        class="relative block px-4 py-1  text-blue-500 bg-white border-t border-b border-r border-gray-300 rounded-r-lg focus:bg-gray-200 hover:bg-gray-200">
        <span>»</span>
    </a>
</nav>
<nav class="relative inline-flex flex-wrap mt-3">
    <a href="#"
        class="relative block px-6 py-2 text-xl text-gray-600 border-t border-b border-l border-gray-300 rounded-l-xl"
        disabled="">
        <span>Previous</span>
    </a>
    <a href="#"
        class="relative block px-6 py-2 text-xl text-blue-500 bg-white border border-gray-300 focus:bg-gray-200 hover:bg-gray-200">
        1
    </a>
    <a href="#" class="relative block px-6 py-2 text-xl text-white bg-blue-600 border border-blue-600">
        2
    </a>
    <a href="#"
        class="relative block px-6 py-2 text-xl text-blue-500 bg-white border border-gray-300 focus:bg-gray-200 hover:bg-gray-200">
        3
    </a>
    <a href="#"
        class="relative block px-6 py-2 text-xl text-blue-500 bg-white border-t border-b border-r border-gray-300 rounded-r-xl focus:bg-gray-200 hover:bg-gray-200">
        <span>Next</span>
    </a>
</nav>
      

Updated on February 28, 2022
Was this page helpful?