pagination

<section>
  <div class="flex justify-center py-12 mx-auto">
    <nav class="relative z-0 inline-flex gap-1.5" aria-label="Pagination">
      <!-- Previous Page Button -->
      <button
        class="flex items-center justify-center transition-all duration-200 focus:ring-2 transition-shadow focus:outline-none text-base-500 bg-white hover:text-accent-600 hover:bg-base-50 focus:ring-accent-500 size-9 p-2 text-sm rounded-md"
        disabled
        aria-label="Go to previous page"
      >
        <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 icons-tabler-outline icon-tabler-chevron-left size-4"
          slot="icon"
        >
          <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
          <path d="M15 6l-6 6l6 6"></path>
        </svg>
      </button>
      <button
        class="flex items-center justify-center transition-all duration-200 focus:ring-2 transition-shadow focus:outline-none text-base-500 bg-white hover:text-accent-600 hover:bg-base-50 focus:ring-accent-500 size-8 p-0.5 text-xs rounded-md"
      >
        1
      </button>
      <button
        class="flex items-center justify-center transition-all duration-200 focus:ring-2 transition-shadow focus:outline-none text-base-500 bg-white hover:text-accent-600 hover:bg-base-50 focus:ring-accent-500 size-8 p-0.5 text-xs rounded-md"
      >
        2
      </button>
      <button
        class="flex items-center justify-center transition-all duration-200 focus:ring-2 transition-shadow focus:outline-none text-base-500 bg-white hover:text-accent-600 hover:bg-base-50 focus:ring-accent-500 size-8 p-0.5 text-xs rounded-md"
      >
        ...
        <button
          class="flex items-center justify-center transition-all duration-200 focus:ring-2 transition-shadow focus:outline-none text-base-500 bg-white hover:text-accent-600 hover:bg-base-50 focus:ring-accent-500 size-8 p-0.5 text-xs rounded-md"
        >
          9
        </button>
        <button
          class="flex items-center justify-center transition-all duration-200 focus:ring-2 transition-shadow focus:outline-none text-base-500 bg-white hover:text-accent-600 hover:bg-base-50 focus:ring-accent-500 size-8 p-0.5 text-xs rounded-md"
        >
          10
        </button>
        <button
          class="flex items-center justify-center transition-all duration-200 focus:ring-2 transition-shadow focus:outline-none text-base-500 bg-white hover:text-accent-600 hover:bg-base-50 focus:ring-accent-500 size-9 p-2 text-sm rounded-md"
          aria-label="Go to next page"
        >
          <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 icons-tabler-outline icon-tabler-chevron-right size-4"
            slot="icon"
          >
            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
            <path d="M9 6l6 6l-6 6"></path>
          </svg>
        </button>
      </button>
    </nav>
  </div>
</section>