Pagination Colors

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