Glassmorphism_Pagination_CRM

<nav class="flex items-center justify-center p-4 bg-gradient-to-br from-purple-50 to-blue-50 dark:from-gray-800 dark:to-gray-900 min-h-[150px] sm:min-h-[200px] md:min-h-[250px] lg:min-h-[300px]">
  <ul class="flex items-center space-x-2 sm:space-x-4 bg-white/30 backdrop-blur-md rounded-xl p-3 sm:p-4 shadow-lg border border-white/20 dark:bg-gray-700/30 dark:border-gray-600/20">
    <li>
      <a href="#" class="relative inline-flex items-center px-3 py-1 sm:px-4 sm:py-2 text-sm sm:text-base font-medium text-gray-700 bg-white/40 rounded-lg ring-1 ring-inset ring-white/30 hover:bg-white/60 focus:outline-none focus:ring-2 focus:ring-purple-200 dark:text-gray-200 dark:bg-gray-800/40 dark:ring-gray-700/30 dark:hover:bg-gray-800/60 dark:focus:ring-purple-600 transition-all duration-200 ease-in-out group">
        <svg class="h-4 w-4 sm:h-5 sm:w-5 mr-1 sm:mr-2 text-gray-500 dark:text-gray-400 group-hover:text-gray-700 dark:group-hover:text-gray-200 transform group-hover:-translate-x-0.5 transition-transform" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1 1 5l4 4"/>
        </svg>
        Prev
      </a>
    </li>
    <li>
      <a href="#" class="relative hidden sm:inline-flex items-center px-3 py-1 sm:px-4 sm:py-2 text-sm sm:text-base font-medium text-gray-700 bg-white/40 rounded-lg ring-1 ring-inset ring-white/30 hover:bg-white/60 focus:outline-none focus:ring-2 focus:ring-purple-200 dark:text-gray-200 dark:bg-gray-800/40 dark:ring-gray-700/30 dark:hover:bg-gray-800/60 dark:focus:ring-purple-600 transition-all duration-200 ease-in-out">
        1
      </a>
    </li>
    <li>
      <a href="#" aria-current="page" class="relative inline-flex items-center px-3 py-1 sm:px-4 sm:py-2 text-sm sm:text-base font-medium text-purple-800 bg-purple-200/60 rounded-lg ring-1 ring-inset ring-purple-300 dark:text-purple-200 dark:bg-purple-700/60 dark:ring-purple-600 focus:outline-none focus:ring-2 focus:ring-purple-400 transition-all duration-200 ease-in-out">
        2
      </a>
    </li>
    <li>
      <a href="#" class="relative hidden sm:inline-flex items-center px-3 py-1 sm:px-4 sm:py-2 text-sm sm:text-base font-medium text-gray-700 bg-white/40 rounded-lg ring-1 ring-inset ring-white/30 hover:bg-white/60 focus:outline-none focus:ring-2 focus:ring-purple-200 dark:text-gray-200 dark:bg-gray-800/40 dark:ring-gray-700/30 dark:hover:bg-gray-800/60 dark:focus:ring-purple-600 transition-all duration-200 ease-in-out">
        3
      </a>
    </li>
    <li>
      <span class="relative inline-flex items-center px-3 py-1 sm:px-4 sm:py-2 text-sm sm:text-base font-medium text-gray-700 dark:text-gray-200">
        ...
      </span>
    </li>
    <li>
      <a href="#" class="relative inline-flex items-center px-3 py-1 sm:px-4 sm:py-2 text-sm sm:text-base font-medium text-gray-700 bg-white/40 rounded-lg ring-1 ring-inset ring-white/30 hover:bg-white/60 focus:outline-none focus:ring-2 focus:ring-purple-200 dark:text-gray-200 dark:bg-gray-800/40 dark:ring-gray-700/30 dark:hover:bg-gray-800/60 dark:focus:ring-purple-600 transition-all duration-200 ease-in-out">
        10
      </a>
    </li>
    <li>
      <a href="#" class="relative inline-flex items-center px-3 py-1 sm:px-4 sm:py-2 text-sm sm:text-base font-medium text-gray-700 bg-white/40 rounded-lg ring-1 ring-inset ring-white/30 hover:bg-white/60 focus:outline-none focus:ring-2 focus:ring-purple-200 dark:text-gray-200 dark:bg-gray-800/40 dark:ring-gray-700/30 dark:hover:bg-gray-800/60 dark:focus:ring-purple-600 transition-all duration-200 ease-in-out group">
        Next
        <svg class="h-4 w-4 sm:h-5 sm:w-5 ml-1 sm:ml-2 text-gray-500 dark:text-gray-400 group-hover:text-gray-700 dark:group-hover:text-gray-200 transform group-hover:translate-x-0.5 transition-transform" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
        </svg>
      </a>
    </li>
  </ul>
</nav>