Dashpro | Tailwind Admin Template

Pagination

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

		                
<!-- left pagination -->
<nav aria-label="Page navigation">
  <ul x-data="{ item: '1' }" class="flex cklsihrbanmq">
    <li>
      <a :class="{ '!bg-purple-500 dark:!bg-purple-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-purple-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-purple-500 dark:!bg-purple-500 text-gray-100': item === '2' }" @click="item = '2'" class="block relative py-3 uajskeiolksb bg-white border border-gray-200 hover:text-gray-100 hover:bg-purple-500 -me-0.5 dark:bg-gray-800 dark:border-gray-700" href="#">1</a></li>
    <li><a :class="{ '!bg-purple-500 dark:!bg-purple-500 text-gray-100': item === '3' }" @click="item = '3'" class="block relative py-3 uajskeiolksb bg-white border border-gray-200 hover:text-gray-100 hover:bg-purple-500 -me-0.5 dark:bg-gray-800 dark:border-gray-700" href="#">2</a></li>
    <li><a :class="{ '!bg-purple-500 dark:!bg-purple-500 text-gray-100': item === '4' }" @click="item = '4'" class="block relative py-3 uajskeiolksb bg-white border border-gray-200 hover:text-gray-100 hover:bg-purple-500 -me-0.5 dark:bg-gray-800 dark:border-gray-700" href="#">3</a></li>
    <li>
      <a :class="{ '!bg-purple-500 dark:!bg-purple-500 text-gray-100': item === '5' }" @click="item = '5'" class="block relative py-3 uajskeiolksb bg-white border border-gray-200 hover:text-gray-100 hover:bg-purple-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="flex yhansklopals">
    <li>
      <a :class="{ '!bg-purple-500 dark:!bg-purple-500 text-gray-100': item === '1' }" @click="item = '1'" class="block relative py-3 uajskeiolksb bg-white border border-gray-200 hover:text-gray-100 hover:bg-purple-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-purple-500 dark:!bg-purple-500 text-gray-100': item === '2' }" @click="item = '2'" class="block relative py-3 uajskeiolksb bg-white border border-gray-200 hover:text-gray-100 hover:bg-purple-500 -me-0.5 dark:bg-gray-800 dark:border-gray-700" href="#">1</a></li>
    <li><a :class="{ '!bg-purple-500 dark:!bg-purple-500 text-gray-100': item === '3' }" @click="item = '3'" class="block relative py-3 uajskeiolksb bg-white border border-gray-200 hover:text-gray-100 hover:bg-purple-500 -me-0.5 dark:bg-gray-800 dark:border-gray-700" href="#">2</a></li>
    <li><a :class="{ '!bg-purple-500 dark:!bg-purple-500 text-gray-100': item === '4' }" @click="item = '4'" class="block relative py-3 uajskeiolksb bg-white border border-gray-200 hover:text-gray-100 hover:bg-purple-500 -me-0.5 dark:bg-gray-800 dark:border-gray-700" href="#">3</a></li>
    <li>
      <a :class="{ '!bg-purple-500 dark:!bg-purple-500 text-gray-100': item === '5' }" @click="item = '5'" class="block relative py-3 uajskeiolksb bg-white border border-gray-200 hover:text-gray-100 hover:bg-purple-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="flex qjnakmsliyrh">
    <li>
      <a :class="{ '!bg-purple-500 dark:!bg-purple-500 text-gray-100': item === '1' }" @click="item = '1'" class="block relative py-3 uajskeiolksb bg-white border border-gray-200 hover:text-gray-100 hover:bg-purple-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-purple-500 dark:!bg-purple-500 text-gray-100': item === '2' }" @click="item = '2'" class="block relative py-3 uajskeiolksb bg-white border border-gray-200 hover:text-gray-100 hover:bg-purple-500 -me-0.5 dark:bg-gray-800 dark:border-gray-700" href="#">1</a></li>
    <li><a :class="{ '!bg-purple-500 dark:!bg-purple-500 text-gray-100': item === '3' }" @click="item = '3'" class="block relative py-3 uajskeiolksb bg-white border border-gray-200 hover:text-gray-100 hover:bg-purple-500 -me-0.5 dark:bg-gray-800 dark:border-gray-700" href="#">2</a></li>
    <li><a :class="{ '!bg-purple-500 dark:!bg-purple-500 text-gray-100': item === '4' }" @click="item = '4'" class="block relative py-3 uajskeiolksb bg-white border border-gray-200 hover:text-gray-100 hover:bg-purple-500 -me-0.5 dark:bg-gray-800 dark:border-gray-700" href="#">3</a></li>
    <li>
      <a :class="{ '!bg-purple-500 dark:!bg-purple-500 text-gray-100': item === '5' }" @click="item = '5'" class="block relative py-3 uajskeiolksb bg-white border border-gray-200 hover:text-gray-100 hover:bg-purple-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>