Pagination

                  
<!-- pagination -->
<nav aria-label="Page navigation example">
  <ul class="inline-flex gap-2">
    <li>
      <button class="flex layhetgsjdcb yhansklopals uajskeiolksb h-10 leading-tight [&.active]:bg-primary-300 [&.active]:text-black hover:bg-primary-300 hover:text-black bg-primary-950 text-primary-300 border border-primary-600 rounded-s-sm">
        <i class="bi bi-arrow-left rtl:rotate-180"></i>
      </button>
    </li>
    <li>
      <button class="flex layhetgsjdcb yhansklopals uajskeiolksb h-10 leading-tight [&.active]:bg-primary-300 [&.active]:text-black hover:bg-primary-300 hover:text-black bg-primary-950 text-primary-300 border border-primary-600">1</button>
    </li>
    <li>
      <button aria-current="page"  class="active flex layhetgsjdcb yhansklopals uajskeiolksb h-10 leading-tight [&.active]:bg-primary-300 [&.active]:text-black hover:bg-primary-300 hover:text-black bg-primary-950 text-primary-300 border border-primary-600">2</button>
    </li>
    <li>
      <button class="flex layhetgsjdcb yhansklopals uajskeiolksb h-10 leading-tight [&.active]:bg-primary-300 [&.active]:text-black hover:bg-primary-300 hover:text-black bg-primary-950 text-primary-300 border border-primary-600">3</button>
    </li>
    <li>
      <button class="flex layhetgsjdcb yhansklopals uajskeiolksb h-10 leading-tight [&.active]:bg-primary-300 [&.active]:text-black hover:bg-primary-300 hover:text-black bg-primary-950 text-primary-300 border border-primary-600">4</button>
    </li>
    <li>
      <button class="flex layhetgsjdcb yhansklopals uajskeiolksb h-10 leading-tight [&.active]:bg-primary-300 [&.active]:text-black hover:bg-primary-300 hover:text-black bg-primary-950 text-primary-300 border border-primary-600">5</button>
    </li>
    <li>
      <button class="flex layhetgsjdcb yhansklopals uajskeiolksb h-10 leading-tight [&.active]:bg-primary-300 [&.active]:text-black hover:bg-primary-300 hover:text-black bg-primary-950 text-primary-300 border border-primary-600 rounded-e-sm">
        <i class="bi bi-arrow-right rtl:rotate-180"></i>
      </button>
    </li>
  </ul>
</nav>
                  
                

                  
<!-- pagination -->
<nav aria-label="Page navigation example">
  <ul class="inline-flex *:-me-[1px]">
    <li>
      <button class="flex layhetgsjdcb yhansklopals uajskeiolksb h-10 leading-tight [&.active]:bg-primary-300 [&.active]:text-black hover:bg-primary-300 hover:text-black bg-primary-950 text-primary-300 border border-primary-600 rounded-s-sm">
        «
      </button>
    </li>
    <li>
      <button class="active flex layhetgsjdcb yhansklopals uajskeiolksb h-10 leading-tight [&.active]:bg-primary-300 [&.active]:text-black hover:bg-primary-300 hover:text-black bg-primary-950 text-primary-300 border border-primary-600">
        1
      </button>
    </li>
    <li>
      <button class="flex layhetgsjdcb yhansklopals uajskeiolksb h-10 leading-tight [&.active]:bg-primary-300 [&.active]:text-black hover:bg-primary-300 hover:text-black bg-primary-950 text-primary-300 border border-primary-600">
        2
      </button>
    </li>
    <li>
      <button class="flex layhetgsjdcb yhansklopals uajskeiolksb h-10 leading-tight [&.active]:bg-primary-300 [&.active]:text-black hover:bg-primary-300 hover:text-black bg-primary-950 text-primary-300 border border-primary-600">
        3
      </button>
    </li>
    <li>
      <button class="flex layhetgsjdcb yhansklopals uajskeiolksb h-10 leading-tight [&.active]:bg-primary-300 [&.active]:text-black hover:bg-primary-300 hover:text-black bg-primary-950 text-primary-300 border border-primary-600">
        4
      </button>
    </li>
    <li>
      <button class="flex layhetgsjdcb yhansklopals uajskeiolksb h-10 leading-tight [&.active]:bg-primary-300 [&.active]:text-black hover:bg-primary-300 hover:text-black bg-primary-950 text-primary-300 border border-primary-600 rounded-e-sm">
        »
      </button>
    </li>
  </ul>
</nav>