Pagination

<!-- Pagination -->
<nav class="flex items-center gap-2"></nav>
 
<!-- Pagination 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">
  Pagination Button
</button>
 
<!-- Pagination Ellipsis -->
<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 Number Wrapper -->
<ul class="flex flex-row items-center gap-1"></ul>
 
<!-- Pagination Number -->
<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">
    3
  </button>
</li>
 
<!-- Pagination Number Active -->
<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">
    4
  </button>
</li>