Taildash | Tailwind Dashboard Template

Pagination
Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.
Example

Example pagination with active page.
			                
<!-- left pagination -->
<nav aria-label="Page navigation">
  <ul x-data="{ item: '1' }" class="hsdfdsfhsdf justify-start space-x-0">
    <li>
      <a :class="{ 'bg-indigo-500 dark:bg-indigo-500 text-gray-100': item === '1' }" @click="item = '1'" class="block relative p-3 bg-white border border-gray-200 hover:text-gray-100 hover:bg-indigo-500 -me-0.5 rounded-s dark:bg-gray-800 dark:border-gray-700" href="#" aria-label="Previous">
        <span aria-hidden="true">«</span>
      </a>
    </li>
    <li><a :class="{ 'bg-indigo-500 dark:bg-indigo-500 text-gray-100': item === '2' }" @click="item = '2'" class="block relative py-3 px-4 bg-white border border-gray-200 hover:text-gray-100 hover:bg-indigo-500 -me-0.5 dark:bg-gray-800 dark:border-gray-700" href="#">1</a></li>
    <li><a :class="{ 'bg-indigo-500 dark:bg-indigo-500 text-gray-100': item === '3' }" @click="item = '3'" class="block relative py-3 px-4 bg-white border border-gray-200 hover:text-gray-100 hover:bg-indigo-500 -me-0.5 dark:bg-gray-800 dark:border-gray-700" href="#">2</a></li>
    <li><a :class="{ 'bg-indigo-500 dark:bg-indigo-500 text-gray-100': item === '4' }" @click="item = '4'" class="block relative py-3 px-4 bg-white border border-gray-200 hover:text-gray-100 hover:bg-indigo-500 -me-0.5 dark:bg-gray-800 dark:border-gray-700" href="#">3</a></li>
    <li>
      <a :class="{ 'bg-indigo-500 dark:bg-indigo-500 text-gray-100': item === '5' }" @click="item = '5'" class="block relative py-3 px-4 bg-white border border-gray-200 hover:text-gray-100 hover:bg-indigo-500 -me-0.5 dark:bg-gray-800 dark:border-gray-700 rounded-e" href="#" aria-label="Next">
        <span aria-hidden="true">»</span>
      </a>
    </li>
  </ul>
</nav>
<!-- center pagination -->
<nav aria-label="Page navigation">
  <ul x-data="{ item: '1' }" class="hsdfdsfhsdf justify-center space-x-0">
    <li>
      <a :class="{ 'bg-indigo-500 dark:bg-indigo-500 text-gray-100': item === '1' }" @click="item = '1'" class="block relative py-3 px-4 bg-white border border-gray-200 hover:text-gray-100 hover:bg-indigo-500 -me-0.5 dark:bg-gray-800 dark:border-gray-700 rounded-s" href="#" aria-label="Previous">
        <span aria-hidden="true">«</span>
      </a>
    </li>
    <li><a :class="{ 'bg-indigo-500 dark:bg-indigo-500 text-gray-100': item === '2' }" @click="item = '2'" class="block relative py-3 px-4 bg-white border border-gray-200 hover:text-gray-100 hover:bg-indigo-500 -me-0.5 dark:bg-gray-800 dark:border-gray-700" href="#">1</a></li>
    <li><a :class="{ 'bg-indigo-500 dark:bg-indigo-500 text-gray-100': item === '3' }" @click="item = '3'" class="block relative py-3 px-4 bg-white border border-gray-200 hover:text-gray-100 hover:bg-indigo-500 -me-0.5 dark:bg-gray-800 dark:border-gray-700" href="#">2</a></li>
    <li><a :class="{ 'bg-indigo-500 dark:bg-indigo-500 text-gray-100': item === '4' }" @click="item = '4'" class="block relative py-3 px-4 bg-white border border-gray-200 hover:text-gray-100 hover:bg-indigo-500 -me-0.5 dark:bg-gray-800 dark:border-gray-700" href="#">3</a></li>
    <li>
      <a :class="{ 'bg-indigo-500 dark:bg-indigo-500 text-gray-100': item === '5' }" @click="item = '5'" class="block relative py-3 px-4 bg-white border border-gray-200 hover:text-gray-100 hover:bg-indigo-500 -me-0.5 dark:bg-gray-800 dark:border-gray-700 rounded-e" href="#" aria-label="Next">
        <span aria-hidden="true">»</span>
      </a>
    </li>
  </ul>
</nav>
<!-- right pagination -->
<nav aria-label="Page navigation">
  <ul x-data="{ item: '1' }" class="hsdfdsfhsdf justify-end space-x-0">
    <li>
      <a :class="{ 'bg-indigo-500 dark:bg-indigo-500 text-gray-100': item === '1' }" @click="item = '1'" class="block relative py-3 px-4 bg-white border border-gray-200 hover:text-gray-100 hover:bg-indigo-500 -me-0.5 dark:bg-gray-800 dark:border-gray-700 rounded-s" href="#" aria-label="Previous">
        <span aria-hidden="true">«</span>
      </a>
    </li>
    <li><a :class="{ 'bg-indigo-500 dark:bg-indigo-500 text-gray-100': item === '2' }" @click="item = '2'" class="block relative py-3 px-4 bg-white border border-gray-200 hover:text-gray-100 hover:bg-indigo-500 -me-0.5 dark:bg-gray-800 dark:border-gray-700" href="#">1</a></li>
    <li><a :class="{ 'bg-indigo-500 dark:bg-indigo-500 text-gray-100': item === '3' }" @click="item = '3'" class="block relative py-3 px-4 bg-white border border-gray-200 hover:text-gray-100 hover:bg-indigo-500 -me-0.5 dark:bg-gray-800 dark:border-gray-700" href="#">2</a></li>
    <li><a :class="{ 'bg-indigo-500 dark:bg-indigo-500 text-gray-100': item === '4' }" @click="item = '4'" class="block relative py-3 px-4 bg-white border border-gray-200 hover:text-gray-100 hover:bg-indigo-500 -me-0.5 dark:bg-gray-800 dark:border-gray-700" href="#">3</a></li>
    <li>
      <a :class="{ 'bg-indigo-500 dark:bg-indigo-500 text-gray-100': item === '5' }" @click="item = '5'" class="block relative py-3 px-4 bg-white border border-gray-200 hover:text-gray-100 hover:bg-indigo-500 -me-0.5 dark:bg-gray-800 dark:border-gray-700 rounded-e" href="#" aria-label="Next">
        <span aria-hidden="true">»</span>
      </a>
    </li>
  </ul>
</nav>