Pagination

<nav class="flex items-center gap-2">
  <!-- /* ----------------------------- Previous Button ---------------------------- */ -->
  <button
    class="inline-flex h-9 items-center justify-center gap-1 rounded-md px-3 py-2 pl-2.5 text-sm font-medium hover:bg-accent hover:text-accent-text/80 sm:h-10"
  >
    <svg
      stroke="currentColor"
      fill="none"
      stroke-width="2"
      viewBox="0 0 24 24"
      stroke-linecap="round"
      stroke-linejoin="round"
      class="h-5 w-5"
      height="1em"
      width="1em"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path d="m15 18-6-6 6-6"></path>
    </svg>
    <span class="hidden sm:inline">Previous</span>
  </button>
 
  <!-- /* ----------------------------- Pagination More ---------------------------- */ -->
  <span aria-hidden="true" class="flex h-9 w-9 items-center justify-center">
    <svg
      class="h-3.5 w-3.5 sm:h-4 sm:w-4"
      stroke="currentColor"
      fill="none"
      stroke-width="2"
      viewBox="0 0 24 24"
      stroke-linecap="round"
      stroke-linejoin="round"
      class="h-4 w-4"
      height="1em"
      width="1em"
      xmlns="http://www.w3.org/2000/svg"
    >
      <circle cx="12" cy="12" r="1"></circle>
      <circle cx="19" cy="12" r="1"></circle>
      <circle cx="5" cy="12" r="1"></circle>
    </svg>
  </span>
 
  <!-- /* --------------------------- Pagination Numbers --------------------------- */ -->
  <ul class="flex flex-row items-center gap-1">
    <li>
      <button
        class="inline-flex h-9 w-9 items-center justify-center gap-1 rounded-md text-sm hover:bg-accent hover:text-accent-text/80 sm:h-10 sm:w-10"
      >
        6
      </button>
    </li>
    <li>
      <button
        class="inline-flex h-9 w-9 items-center justify-center gap-1 rounded-md border bg-surface text-sm hover:bg-accent hover:text-accent-text/80 sm:h-10 sm:w-10"
      >
        7
      </button>
    </li>
    <li>
      <button
        class="inline-flex h-9 w-9 items-center justify-center gap-1 rounded-md text-sm hover:bg-accent hover:text-accent-text/80 sm:h-10 sm:w-10"
      >
        8
      </button>
    </li>
  </ul>
 
  <!-- /* ----------------------------- Pagination More ---------------------------- */ -->
  <span aria-hidden="true" class="flex h-9 w-9 items-center justify-center">
    <svg
      class="h-3.5 w-3.5 sm:h-4 sm:w-4"
      stroke="currentColor"
      fill="none"
      stroke-width="2"
      viewBox="0 0 24 24"
      stroke-linecap="round"
      stroke-linejoin="round"
      class="h-4 w-4"
      height="1em"
      width="1em"
      xmlns="http://www.w3.org/2000/svg"
    >
      <circle cx="12" cy="12" r="1"></circle>
      <circle cx="19" cy="12" r="1"></circle>
      <circle cx="5" cy="12" r="1"></circle>
    </svg>
  </span>
 
  <!-- /* ----------------------------- Next Button ---------------------------- */ -->
  <button
    class="inline-flex h-9 items-center justify-center gap-1 rounded-md px-3 py-2 pl-2.5 text-sm font-medium hover:bg-accent hover:text-accent-text/80 sm:h-10"
  >
    <span class="hidden sm:inline">Next</span>
    <svg
      stroke="currentColor"
      fill="none"
      stroke-width="2"
      viewBox="0 0 24 24"
      stroke-linecap="round"
      stroke-linejoin="round"
      class="h-5 w-5"
      height="1em"
      width="1em"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path d="m9 18 6-6-6-6"></path>
    </svg>
  </button>
</nav>