1
<section>
  <div class="flex justify-center py-12 mx-auto">
    <nav class="relative z-0 inline-flex gap-4" aria-label="Pagination">
      <!-- Previous Page Button -->
      <button
        type="button"
        class="hover:text-blue-500 duration-300 px-2 py-2 text-sm font-medium text-gray-500 disabled:text-gray-300"
        aria-label="Go to previous page"
        disabled
      >
        <span class="sr-only">Previous</span>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="icon icon-tabler size-4 icons-tabler-outline icon-tabler-chevron-left"
        >
          <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
          <path d="M15 6l-6 6l6 6"></path>
        </svg>
      </button>
      <!-- Current Page Indicator -->
      <span
        class="relative z-10 inline-flex items-center text-sm font-medium text-blue-500"
        aria-current="page"
      >
        1
      </span>
      <!-- Page Buttons -->
      <button
        type="button"
        class="hover:text-blue-500 duration-300 text-sm font-medium text-gray-500"
        aria-label="Go to page 2"
      >
        2
      </button>
      <span class="text-gray-500">...</span>
      <button
        type="button"
        class="hover:text-blue-500 duration-300 text-sm font-medium text-gray-500"
        aria-label="Go to page 9"
      >
        9
      </button>
      <button
        type="button"
        class="hover:text-blue-500 duration-300 text-sm font-medium text-gray-500"
        aria-label="Go to page 10"
      >
        10
      </button>
      <!-- Next Page Button -->
      <button
        type="button"
        class="hover:text-blue-500 duration-300 px-2 py-2 text-sm font-medium text-gray-500 rounded-r-md hover:bg-gray-50"
        aria-label="Go to next page"
      >
        <span class="sr-only">Next</span>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="icon size-4 icon-tabler icons-tabler-outline icon-tabler-chevron-right"
        >
          <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
          <path d="M9 6l6 6l-6 6"></path>
        </svg>
      </button>
    </nav>
  </div>
</section>
pagination
