What pagination styles are included?

Numbered page links with prev/next arrows, a simplified prev/next-only version, a compact "Page X of Y" display, and one with a results-per-page dropdown.

Do these need JavaScript to work?

The HTML structure doesn't need JavaScript. You'd wire up the actual page navigation through your backend or a frontend router, the component just provides the UI.

How do I show which page is active?

There's a highlighted current page number in the component. Just apply the active state classes to the current page element dynamically.

Yes. The nav element has aria-label="Pagination" and each link has descriptive aria text so screen readers can navigate them properly.

Pagination

Ready to use Tailwind CSS pagination components with production-ready, copy-paste HTML code. Use them as they are, or as a starting point to build beautiful websites.

Pagination is one of those things nobody thinks about until they need it and then it's kind of annoying to build. We have a few straightforward layouts: numbered page links, prev/next only, a compact version with a page count label, and one with a per-page selector. Nothing revolutionary but they're clean, accessible, and ready to hook up to your data. Fully Tailwind, no JavaScript required for the layout itself.

Tailwind

Centered numbers

<nav class="flex border-t border-gray-200 pt-4 md:pt-5" aria-label="Pagination">
          <div class="flex flex-1 items-center">
            <a href="#" class="flex items-center gap-x-1.5 text-sm font-semibold text-gray-500 hover:text-gray-700">
              <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                <path d="M15 6L9 12L15 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
              </svg>
              Previous
            </a>
          </div>
          <div class="hidden md:flex md:items-center md:gap-x-0.5">
            <a href="#" aria-current="page" class="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-pink-500 text-sm font-medium text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">1</a>
            <a href="#" class="inline-flex h-10 w-10 items-center justify-center rounded-lg text-sm font-medium text-gray-500 hover:bg-gray-50 hover:text-gray-700">2</a>
            <a href="#" class="inline-flex h-10 w-10 items-center justify-center rounded-lg text-sm font-medium text-gray-500 hover:bg-gray-50 hover:text-gray-700">3</a>
            <span class="inline-flex h-10 w-10 items-center justify-center text-sm font-medium text-gray-500">...</span>
            <a href="#" class="inline-flex h-10 w-10 items-center justify-center rounded-lg text-sm font-medium text-gray-500 hover:bg-gray-50 hover:text-gray-700">8</a>
            <a href="#" class="inline-flex h-10 w-10 items-center justify-center rounded-lg text-sm font-medium text-gray-500 hover:bg-gray-50 hover:text-gray-700">9</a>
            <a href="#" class="inline-flex h-10 w-10 items-center justify-center rounded-lg text-sm font-medium text-gray-500 hover:bg-gray-50 hover:text-gray-700">10</a>
          </div>
          <div class="flex flex-1 items-center justify-end">
            <a href="#" class="flex items-center gap-x-1.5 text-sm font-semibold text-gray-500 hover:text-gray-700">
              Next
              <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                <path d="M9 6L15 12L9 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
              </svg>
            </a>
          </div>
        </nav>

Page buttons

<nav class="flex justify-center border-t border-gray-200 pt-3" aria-label="Pagination">
          <div class="flex -space-x-px rounded-lg shadow-sm">
            <a href="#" class="relative inline-flex items-center justify-center gap-x-2 rounded-l-lg p-2.5 text-sm font-semibold text-gray-700 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus-visible:outline-offset-0 sm:px-4 sm:py-2.5">
              <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                <path d="M15 6L9 12L15 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
              </svg>
              <span class="sr-only sm:not-sr-only">Previous</span>
            </a>
            <a href="#" aria-current="page" class="relative z-10 inline-flex h-10 w-10 items-center justify-center bg-pink-500 text-sm font-semibold text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">1</a>
            <a href="#" class="relative inline-flex h-10 w-10 items-center justify-center text-sm font-semibold text-gray-700 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus-visible:outline-offset-0">2</a>
            <a href="#" class="relative hidden h-10 w-10 items-center justify-center text-sm font-semibold text-gray-700 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus-visible:outline-offset-0 sm:inline-flex">3</a>
            <span class="relative inline-flex h-10 w-10 items-center justify-center text-sm font-semibold text-gray-700 ring-1 ring-inset ring-gray-300">...</span>
            <a href="#" class="relative hidden h-10 w-10 items-center justify-center text-sm font-semibold text-gray-700 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus-visible:outline-offset-0 sm:inline-flex">8</a>
            <a href="#" class="inline-flex h-10 w-10 items-center justify-center text-sm font-semibold text-gray-700 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus-visible:outline-offset-0">9</a>
            <a href="#" class="inline-flex h-10 w-10 items-center justify-center text-sm font-semibold text-gray-700 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus-visible:outline-offset-0">10</a>
            <a href="#" class="inline-flex items-center justify-center gap-x-2 rounded-r-lg p-2.5 text-sm font-semibold text-gray-700 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus-visible:outline-offset-0 sm:px-4 sm:py-2.5">
              <span class="sr-only sm:not-sr-only">Next</span>
              <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                <path d="M9 6L15 12L9 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
              </svg>
            </a>
          </div>
        </nav>

Buttons on right

<nav class="border-t border-gray-200 pt-3 sm:flex sm:items-center sm:justify-between" aria-label="Pagination">
          <div class="hidden sm:block">
            <p class="text-sm text-gray-700">
              Showing
              <span class="font-medium">1</span>
              to
              <span class="font-medium">20</span>
              of
              <span class="font-medium">100</span>
              results
            </p>
          </div>
          <div class="flex items-center justify-between gap-x-3">
            <a href="#" class="rounded-lg px-3 py-2 text-sm font-semibold text-gray-700 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline-offset-0">Preview</a>
            <a href="#" class="rounded-lg px-3 py-2 text-sm font-semibold text-gray-700 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline-offset-0">Next</a>
          </div>
        </nav>

Frequently asked questions

: Numbered page links with prev/next arrows, a simplified prev/next-only version, a compact "Page X of Y" display, and one with a results-per-page dropdown.
: The HTML structure doesn't need JavaScript. You'd wire up the actual page navigation through your backend or a frontend router, the component just provides the UI.
: There's a highlighted current page number in the component. Just apply the active state classes to the current page element dynamically.
: Yes. The nav element has aria-label="Pagination" and each link has descriptive aria text so screen readers can navigate them properly.

Related Tailwind CSS components

More free, copy-paste Tailwind CSS components to use in your projects.

Buttons 12 components Tabs 10 components Progress Bars 8 components Button Groups 4 components