<ul class="flex space-x-2 justify-center my-10 pagination-Container">
  <li>
    <a
      href="#"
      class="
        group
        w-10
        h-10
        grid
        place-items-center
        rounded-md
        border
        lg:border-2
        border-muted-400
        hover:bg-muted-400
        text-muted-400
        hover:text-muted-200
        dark:border-muted-600
        dark:hover:bg-muted-600
        dark:text-muted-500
        dark:hover:text-muted-100
        transition-colors
        duration-300
        pointer-events-none
        opacity-60
        cursor-not-allowed
      "
    >
      <span class="font-sans font-medium">...</span>
    </a>
  </li>
  <li>
    <a
      href="#"
      class="
        group
        w-10
        h-10
        grid
        place-items-center
        rounded-md
        border
        lg:border-2
        border-primary-400
        hover:bg-primary-400
        text-primary-400
        hover:text-muted-200
        transition-colors
        duration-300
      "
    >
      <span class="font-sans font-medium">1</span>
    </a>
  </li>
  <li>
    <a
      href="#"
      class="
        group
        w-10
        h-10
        grid
        place-items-center
        rounded-md
        border
        lg:border-2
        border-muted-400
        hover:bg-muted-400
        text-muted-400
        hover:text-muted-200
        dark:border-muted-600
        dark:hover:bg-muted-600
        dark:text-muted-500
        dark:hover:text-muted-100
        transition-colors
        duration-300
      "
    >
      <span class="font-sans font-medium">2</span>
    </a>
  </li>
  <li>
    <a
      href="#"
      class="
        group
        w-10
        h-10
        grid
        place-items-center
        rounded-md
        border
        lg:border-2
        border-muted-400
        hover:bg-muted-400
        text-muted-400
        hover:text-muted-200
        dark:border-muted-600
        dark:hover:bg-muted-600
        dark:text-muted-500
        dark:hover:text-muted-100
        transition-colors
        duration-300
      "
    >
      <span class="font-sans font-medium">3</span>
    </a>
  </li>
  <li>
    <a
      href="#"
      class="
        group
        w-10
        h-10
        grid
        place-items-center
        rounded-md
        border
        lg:border-2
        border-muted-400
        hover:bg-muted-400
        text-muted-400
        hover:text-muted-200
        dark:border-muted-600
        dark:hover:bg-muted-600
        dark:text-muted-500
        dark:hover:text-muted-100
        transition-colors
        duration-300
      "
    >
      <span class="font-sans font-medium">4</span>
    </a>
  </li>
  <li>
    <a
      href="#"
      class="
        group
        w-10
        h-10
        grid
        place-items-center
        rounded-md
        border
        lg:border-2
        border-muted-400
        hover:bg-muted-400
        text-muted-400
        hover:text-muted-200
        dark:border-muted-600
        dark:hover:bg-muted-600
        dark:text-muted-500
        dark:hover:text-muted-100
        transition-colors
        duration-300
      "
    >
      <span class="font-sans font-medium">...</span>
    </a>
  </li>
</ul>
