Pagination With Ellipsis

                    <div class="flex justify-center my-8">
  <div class="flex rounded-md overflow-hidden">
    <button class="px-3 py-2 bg-white border border-gray-300 text-gray-700 hover:bg-gray-100">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
      </svg>
    </button>
    <button class="px-4 py-2 bg-white border border-gray-300 text-gray-700 hover:bg-gray-100">1</button>
    <button class="px-4 py-2 bg-blue-600 border border-blue-600 text-white">2</button>
    <button class="px-4 py-2 bg-white border border-gray-300 text-gray-700 hover:bg-gray-100">3</button>
    <button class="px-4 py-2 bg-white border border-gray-300 text-gray-700 hover:bg-gray-100">4</button>
    <button class="px-4 py-2 bg-white border border-gray-300 text-gray-700 hover:bg-gray-100 flex items-center justify-center">
      <span class="mx-0.5">...</span>
    </button>
    <button class="px-4 py-2 bg-white border border-gray-300 text-gray-700 hover:bg-gray-100">42</button>
    <button class="px-3 py-2 bg-white border border-gray-300 text-gray-700 hover:bg-gray-100">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
      </svg>
    </button>
  </div>
</div>