Pagination

Pagination components made with TailwindCSS.

Basic "Next" and "Previous" buttons with arrows

Screen Size:

<div class="mx-auto container">
  <!-- for first page -->
  <div class="container md:mb-8 pt-8 px-4 mx-auto flex justify-center select-none">
    <div class="mr-4">
      <span class="cursor-not-allowed text-gray-400">&larr; Previous</span>
    </div>

    <div>
      <a class="text-gray-600 hover:underline" href="#" rel="next">Next &rarr;</a>
    </div>
  </div>

  <!-- middle pages -->
  <div class="container md:mb-8 pt-8 px-4 mx-auto flex justify-center select-none">
    <div class="mr-4">
      <a class="text-gray-600 hover:underline" href="#" rel="prev">&larr; Previous</a>
    </div>

    <div>
      <a class="text-gray-600 hover:underline" href="#" rel="next">Next &rarr;</a>
    </div>
  </div>

  <!-- for last page -->
  <div class="container md:mb-8 pt-8 px-4 mx-auto flex justify-center select-none">
    <div class="mr-4">
      <a class="text-gray-600 hover:underline" href="#" rel="prev">&larr; Previous</a>
    </div>

    <div>
      <span class="cursor-not-allowed text-gray-400" rel="next">Next &rarr;</span>
    </div>
  </div>
</div>

Basic "Next" and "Previous" buttons with border and background

Screen Size:

<div class="mx-auto container">
  <!-- for first page -->
  <div class="container md:mb-8 pt-8 px-4 mx-auto flex justify-center select-none">
    <div class="border px-4 py-2 rounded-l cursor-not-allowed text-gray-400">
      &larr; Previous
    </div>

    <a class="block border px-4 py-2 rounded-r hover:bg-gray-200 text-gray-600" href="#" rel="next">
      Next &rarr;
    </a>
  </div>

  <!-- middle pages -->
  <div class="container md:mb-8 pt-8 px-4 mx-auto flex justify-center select-none">
    <a class="block border px-4 py-2 rounded-l hover:bg-gray-200 text-gray-600" rel="prev" href="#">
      &larr; Previous
    </a>

    <a class="block border px-4 py-2 rounded-r hover:bg-gray-200 text-gray-600" href="#" rel="next">
      Next &rarr;
    </a>
  </div>

  <!-- for last page -->
  <div class="container md:mb-8 pt-8 px-4 mx-auto flex justify-center select-none">
    <a class="block border px-4 py-2 rounded-l hover:bg-gray-200 text-gray-600" rel="prev" href="#">
      &larr; Previous
    </a>

    <div class="border px-4 py-2 rounded-r cursor-not-allowed text-gray-400">
      Next &rarr;
    </div>
  </div>
</div>

Pagination with numbers, previous and next buttons

Screen Size:

<div class="container md:mb-8 pt-8 px-4 mx-auto flex justify-center select-none">
  <a class="block border px-4 py-2 rounded-l hover:bg-gray-200 text-gray-600" rel="prev" href="#">&larr;</a>

  <a class="block border px-4 py-2 hover:bg-gray-200 text-gray-600" href="#">1</a>
  <a class="block border px-4 py-2 bg-indigo-500 text-white" href="#">2</a>
  <a class="block border px-4 py-2 hover:bg-gray-200 text-gray-600" href="#">3</a>

  <span class="border px-4 py-2 cursor-not-allowed text-gray-400">&hellip;</span>

  <a class="block border px-4 py-2 hover:bg-gray-200 text-gray-600" href="#">10</a>

  <a class="block border px-4 py-2 rounded-r hover:bg-gray-200 text-gray-600" href="#" rel="next">&rarr;</a>
</div>

Designed and built with ♥ by Saleh Mir. Licensed under the MIT License.