Pagination Sizes

                    <div class="flex flex-col items-center my-8 space-y-8">
  <!-- Extra Small -->
  <div>
    <h3 class="text-sm font-medium mb-2 text-center">Extra Small</h3>
    <div class="flex rounded-md overflow-hidden">
      <button class="px-2 py-1 text-xs bg-white border border-gray-300 text-gray-700 hover:bg-gray-100">1</button>
      <button class="px-2 py-1 text-xs bg-blue-600 border border-blue-600 text-white">2</button>
      <button class="px-2 py-1 text-xs bg-white border border-gray-300 text-gray-700 hover:bg-gray-100">3</button>
      <button class="px-2 py-1 text-xs bg-white border border-gray-300 text-gray-700 hover:bg-gray-100">4</button>
    </div>
  </div>

  <!-- Small -->
  <div>
    <h3 class="text-sm font-medium mb-2 text-center">Small</h3>
    <div class="flex rounded-md overflow-hidden">
      <button class="px-3 py-1.5 text-sm bg-white border border-gray-300 text-gray-700 hover:bg-gray-100">1</button>
      <button class="px-3 py-1.5 text-sm bg-blue-600 border border-blue-600 text-white">2</button>
      <button class="px-3 py-1.5 text-sm bg-white border border-gray-300 text-gray-700 hover:bg-gray-100">3</button>
      <button class="px-3 py-1.5 text-sm bg-white border border-gray-300 text-gray-700 hover:bg-gray-100">4</button>
    </div>
  </div>

  <!-- Medium (Default) -->
  <div>
    <h3 class="text-sm font-medium mb-2 text-center">Medium (Default)</h3>
    <div class="flex rounded-md overflow-hidden">
      <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>
    </div>
  </div>

  <!-- Large -->
  <div>
    <h3 class="text-sm font-medium mb-2 text-center">Large</h3>
    <div class="flex rounded-md overflow-hidden">
      <button class="px-5 py-2.5 text-lg bg-white border border-gray-300 text-gray-700 hover:bg-gray-100">1</button>
      <button class="px-5 py-2.5 text-lg bg-blue-600 border border-blue-600 text-white">2</button>
      <button class="px-5 py-2.5 text-lg bg-white border border-gray-300 text-gray-700 hover:bg-gray-100">3</button>
      <button class="px-5 py-2.5 text-lg bg-white border border-gray-300 text-gray-700 hover:bg-gray-100">4</button>
    </div>
  </div>

  <!-- Extra Large -->
  <div>
    <h3 class="text-sm font-medium mb-2 text-center">Extra Large</h3>
    <div class="flex rounded-md overflow-hidden">
      <button class="px-6 py-3 text-xl bg-white border border-gray-300 text-gray-700 hover:bg-gray-100">1</button>
      <button class="px-6 py-3 text-xl bg-blue-600 border border-blue-600 text-white">2</button>
      <button class="px-6 py-3 text-xl bg-white border border-gray-300 text-gray-700 hover:bg-gray-100">3</button>
      <button class="px-6 py-3 text-xl bg-white border border-gray-300 text-gray-700 hover:bg-gray-100">4</button>
    </div>
  </div>
</div>