Tailwind CSS Pagination Components

                            <div class="flex justify-center my-8">
  <div class="flex rounded-md overflow-hidden">
    <button class="flex items-center px-4 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 mr-1" 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>
      Previous
    </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="flex items-center px-4 py-2 bg-white border border-gray-300 text-gray-700 hover:bg-gray-100">
      Next
      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" 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>
                        

                            <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> 
                        

                            <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-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> 
                        

                            <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> 
                        

                            <div class="flex justify-center my-8">
  <div class="flex space-x-2">
    <button class="w-10 h-10 rounded-full flex items-center justify-center 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="w-10 h-10 rounded-full flex items-center justify-center bg-white border border-gray-300 text-gray-700 hover:bg-gray-100">1</button>
    <button class="w-10 h-10 rounded-full flex items-center justify-center bg-blue-600 border border-blue-600 text-white">2</button>
    <button class="w-10 h-10 rounded-full flex items-center justify-center bg-white border border-gray-300 text-gray-700 hover:bg-gray-100">3</button>
    <button class="w-10 h-10 rounded-full flex items-center justify-center bg-white border border-gray-300 text-gray-700 hover:bg-gray-100">4</button>
    <button class="w-10 h-10 rounded-full flex items-center justify-center 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> 
                        

                            <div class="flex justify-center my-8">
  <!-- Only show current page with arrows on small screens -->
  <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-blue-600 border border-blue-600 text-white sm:hidden">2</button>
    <!-- Show more page numbers on medium screens and up -->
    <button class="hidden sm:block px-4 py-2 bg-white border border-gray-300 text-gray-700 hover:bg-gray-100">1</button>
    <button class="hidden sm:block px-4 py-2 bg-blue-600 border border-blue-600 text-white">2</button>
    <button class="hidden sm:block px-4 py-2 bg-white border border-gray-300 text-gray-700 hover:bg-gray-100">3</button>
    <!-- Show more page numbers on slightly larger screens -->
    <button class="hidden md:block px-4 py-2 bg-white border border-gray-300 text-gray-700 hover:bg-gray-100">4</button>
    <button class="hidden md:block px-4 py-2 bg-white border border-gray-300 text-gray-700 hover:bg-gray-100">5</button>
    <!-- Show ellipsis and last page on large screens -->
    <button class="hidden lg:flex px-4 py-2 bg-white border border-gray-300 text-gray-700 hover:bg-gray-100 items-center justify-center">
      <span class="mx-0.5">...</span>
    </button>
    <button class="hidden lg:block 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> 
                        

                            <div class="flex justify-center my-8">
  <div class="flex rounded-md overflow-hidden">
    <!-- Disabled previous button -->
    <button class="px-3 py-2 bg-gray-100 border border-gray-200 text-gray-400 cursor-not-allowed">
      <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>
    <!-- Active state -->
    <button class="px-4 py-2 bg-blue-600 border border-blue-600 text-white">1</button>
    <!-- Hover state -->
    <button class="px-4 py-2 bg-white border border-gray-300 text-gray-700 hover:bg-gray-100 hover:border-gray-400 transition-colors duration-200">2</button>
    <!-- Focus state -->
    <button class="px-4 py-2 bg-white border border-gray-300 text-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:z-10">3</button>
    <!-- Normal state -->
    <button class="px-4 py-2 bg-white border border-gray-300 text-gray-700 hover:bg-gray-100">4</button>
    <!-- Normal next 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>

<div class="flex justify-center mt-12 mb-8">
  <div class="flex space-x-2">
    <!-- Loading state button -->
    <button class="w-10 h-10 rounded-full flex items-center justify-center bg-gray-200 border border-gray-300 text-gray-400">
      <svg class="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
      </svg>
    </button>
    <button class="w-10 h-10 rounded-full flex items-center justify-center bg-white border border-gray-300 text-gray-700 hover:bg-gray-100">1</button>
    <button class="w-10 h-10 rounded-full flex items-center justify-center bg-blue-600 border border-blue-600 text-white">2</button>
    <button class="w-10 h-10 rounded-full flex items-center justify-center bg-white border border-gray-300 text-gray-700 hover:bg-gray-100">3</button>
    <button class="w-10 h-10 rounded-full flex items-center justify-center bg-white border border-gray-300 text-gray-700 hover:bg-gray-100">4</button>
  </div>
</div> 
                        

                            <div class="flex flex-col md:flex-row justify-between items-center my-8 space-y-4 md:space-y-0">
  <!-- Page information -->
  <div class="text-sm text-gray-700">
    Showing <span class="font-medium">11</span> to <span class="font-medium">20</span> of <span class="font-medium">97</span> results
  </div>
  
  <!-- Pagination buttons -->
  <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-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>
  
  <!-- Items per page selector -->
  <div class="flex items-center text-sm text-gray-700">
    <span class="mr-2">Show</span>
    <div class="relative">
      <select class="appearance-none bg-white border border-gray-300 rounded px-3 py-1 pr-8 focus:outline-none focus:ring-blue-500 focus:border-blue-500 text-gray-700">
        <option>10</option>
        <option selected>20</option>
        <option>30</option>
        <option>50</option>
        <option>100</option>
      </select>
      <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
        <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
          <path d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" />
        </svg>
      </div>
    </div>
    <span class="ml-2">per page</span>
  </div>
</div> 
                        

                            <div class="flex justify-center my-8">
  <div class="flex items-center space-x-4">
    <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-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 class="flex items-center">
      <span class="text-sm text-gray-700 mr-2">Go to</span>
      <div class="relative">
        <select class="appearance-none bg-white border border-gray-300 rounded px-3 py-1.5 pr-8 focus:outline-none focus:ring-blue-500 focus:border-blue-500 text-gray-700">
          <option>1</option>
          <option selected>2</option>
          <option>3</option>
          <option>4</option>
          <option>5</option>
          <option>...</option>
          <option>42</option>
        </select>
        <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
          <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
            <path d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" />
          </svg>
        </div>
      </div>
      <span class="text-sm text-gray-700 ml-2">page</span>
    </div>
  </div>
</div> 
                        

                            <div class="flex flex-col items-center my-8 space-y-8">
  <!-- Default Blue Theme -->
  <div>
    <h3 class="text-sm font-medium mb-2 text-center">Default Blue Theme</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>

  <!-- Red Theme -->
  <div>
    <h3 class="text-sm font-medium mb-2 text-center">Red Theme</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-red-600 border border-red-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>

  <!-- Green Theme -->
  <div>
    <h3 class="text-sm font-medium mb-2 text-center">Green Theme</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-green-600 border border-green-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>

  <!-- Purple Theme -->
  <div>
    <h3 class="text-sm font-medium mb-2 text-center">Purple Theme</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-purple-600 border border-purple-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>

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

                            <div class="flex justify-center my-8">
  <div class="flex space-x-1">
    <button class="px-3 py-2 rounded text-gray-600 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 rounded text-gray-600 hover:bg-gray-100">1</button>
    <button class="px-4 py-2 rounded bg-blue-600 text-white">2</button>
    <button class="px-4 py-2 rounded text-gray-600 hover:bg-gray-100">3</button>
    <button class="px-4 py-2 rounded text-gray-600 hover:bg-gray-100">4</button>
    <button class="px-3 py-2 rounded text-gray-600 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> 
                        

                            <div class="flex justify-center my-8">
  <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>