Skeuomorphic_Purple_Pagination

<nav class="flex justify-center items-center py-8 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-purple-100 to-violet-200 dark:from-gray-900 dark:to-black rounded-xl shadow-xl border border-purple-300 dark:border-gray-700" aria-label="Pagination">
  <div class="flex flex-wrap gap-2 sm:gap-4 justify-center">
    <a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-purple-700 dark:text-gray-200 bg-gradient-to-br from-purple-300 to-purple-400 dark:from-purple-800 dark:to-purple-900 rounded-lg shadow-inner-lg shadow-purple-600/[.2] dark:shadow-purple-900/[.5] hover:bg-gradient-to-tl hover:from-purple-400 hover:to-purple-500 dark:hover:from-purple-900 dark:hover:to-purple-950 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-purple-200 dark:focus:ring-offset-gray-900 focus:ring-purple-500 transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95 active:shadow-inset-lg border border-purple-500 dark:border-purple-700" title="Previous Page">
      <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M12.79 5.23a.75.75 0 010 1.06L9.06 10l3.73 3.71a.75.75 0 11-1.06 1.06l-4.25-4.25a.75.75 0 010-1.06l4.25-4.25a.75.75 0 011.06 0z" clip-rule="evenodd" />
      </svg>
      <span class="hidden sm:inline ml-2">Previous</span>
    </a>
    <div class="hidden sm:flex rounded-lg shadow-md border border-purple-400 dark:border-purple-700">
      <a href="#" aria-current="page" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-white dark:text-gray-100 bg-gradient-to-br from-purple-600 to-purple-700 dark:from-purple-700 dark:to-purple-800 rounded-l-lg shadow-inner-lg shadow-purple-900/[.3] dark:shadow-purple-950/[.6] ring-2 ring-purple-500 dark:ring-purple-600 ring-offset-2 ring-offset-purple-200 dark:ring-offset-gray-900 transition-all duration-300 ease-in-out transform scale-105 border border-purple-700 dark:border-purple-800 focus:outline-none">
        1
      </a>
      <a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-purple-700 dark:text-gray-200 bg-gradient-to-br from-purple-300 to-purple-400 dark:from-purple-800 dark:to-purple-900 -ml-px hover:bg-gradient-to-tl hover:from-purple-400 hover:to-purple-500 dark:hover:from-purple-900 dark:hover:to-purple-950 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-purple-200 dark:focus:ring-offset-gray-900 focus:ring-purple-500 transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95 active:shadow-inset-lg border border-purple-500 dark:border-purple-700">
        2
      </a>
      <a href="#" class="relative hidden md:inline-flex items-center px-4 py-2 text-sm font-medium text-purple-700 dark:text-gray-200 bg-gradient-to-br from-purple-300 to-purple-400 dark:from-purple-800 dark:to-purple-900 -ml-px hover:bg-gradient-to-tl hover:from-purple-400 hover:to-purple-500 dark:hover:from-purple-900 dark:hover:to-purple-950 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-purple-200 dark:focus:ring-offset-gray-900 focus:ring-purple-500 transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95 active:shadow-inset-lg border border-purple-500 dark:border-purple-700">
        3
      </a>
      <span class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-purple-700 dark:text-gray-300 bg-gradient-to-br from-purple-200 to-purple-300 dark:from-purple-900 dark:to-gray-950 -ml-px" aria-disabled="true">
        ...
      </span>
      <a href="#" class="relative hidden md:inline-flex items-center px-4 py-2 text-sm font-medium text-purple-700 dark:text-gray-200 bg-gradient-to-br from-purple-300 to-purple-400 dark:from-purple-800 dark:to-purple-900 -ml-px hover:bg-gradient-to-tl hover:from-purple-400 hover:to-purple-500 dark:hover:from-purple-900 dark:hover:to-purple-950 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-purple-200 dark:focus:ring-offset-gray-900 focus:ring-purple-500 transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95 active:shadow-inset-lg border border-purple-500 dark:border-purple-700">
        9
      </a>
      <a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-purple-700 dark:text-gray-200 bg-gradient-to-br from-purple-300 to-purple-400 dark:from-purple-800 dark:to-purple-900 -ml-px rounded-r-lg hover:bg-gradient-to-tl hover:from-purple-400 hover:to-purple-500 dark:hover:from-purple-900 dark:hover:to-purple-950 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-purple-200 dark:focus:ring-offset-gray-900 focus:ring-purple-500 transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95 active:shadow-inset-lg border border-purple-500 dark:border-purple-700">
        10
      </a>
    </div>
    <a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-purple-700 dark:text-gray-200 bg-gradient-to-br from-purple-300 to-purple-400 dark:from-purple-800 dark:to-purple-900 rounded-lg shadow-inner-lg shadow-purple-600/[.2] dark:shadow-purple-900/[.5] hover:bg-gradient-to-tl hover:from-purple-400 hover:to-purple-500 dark:hover:from-purple-900 dark:hover:to-purple-950 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-purple-200 dark:focus:ring-offset-gray-900 focus:ring-purple-500 transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95 active:shadow-inset-lg border border-purple-500 dark:border-purple-700" title="Next Page">
      <span class="hidden sm:inline mr-2">Next</span>
      <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 010-1.06L10.94 10 7.21 6.29a.75.75 0 111.06-1.06l4.25 4.25a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06 0z" clip-rule="evenodd" />
      </svg>
    </a>
  </div>
</nav>