Retro_Grayscale_Crypto_Pagination

<nav class="flex flex-col sm:flex-row items-center justify-between p-4 bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 font-mono text-sm border-t-4 border-b-4 border-gray-900 dark:border-gray-100 shadow-inner dark:shadow-none">
  <div class="flex items-center space-x-4 mb-4 sm:mb-0">
    <span class="hidden sm:inline">Showing</span>
    <div class="relative">
      <select class="appearance-none bg-gray-200 dark:bg-gray-700 border border-gray-400 dark:border-gray-600 px-3 py-1 pr-8 rounded-none shadow-sm focus:outline-none focus:ring-1 focus:ring-gray-500 focus:border-gray-500 cursor-pointer text-gray-800 dark:text-gray-200">
        <option value="10">10</option>
        <option value="25">25</option>
        <option value="50">50</option>
        <option value="100">100</option>
      </select>
      <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 dark:text-gray-300">
        <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
      </div>
    </div>
    <span>entries per page</span>
  </div>

  <div class="flex items-center space-x-2">
    <button class="px-3 py-1 border border-gray-600 dark:border-gray-400 bg-gray-300 dark:bg-gray-800 text-gray-700 dark:text-gray-300 transition-all duration-200 ease-in-out hover:bg-gray-400 dark:hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed rounded-none font-bold shadow-sm">
      &lt;&lt; First
    </button>
    <button class="px-3 py-1 border border-gray-600 dark:border-gray-400 bg-gray-300 dark:bg-gray-800 text-gray-700 dark:text-gray-300 transition-all duration-200 ease-in-out hover:bg-gray-400 dark:hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed rounded-none font-bold shadow-sm">
      &lt; Prev
    </button>

    <div class="flex space-x-1 sm:space-x-2">
      <button class="hidden sm:block px-3 py-1 border border-gray-600 dark:border-gray-400 bg-gray-400 dark:bg-gray-700 text-gray-900 dark:text-gray-100 font-bold rounded-none shadow-sm">1</button>
      <button class="px-3 py-1 border border-gray-600 dark:border-gray-400 bg-gray-300 dark:bg-gray-800 text-gray-700 dark:text-gray-300 transition-all duration-200 ease-in-out hover:bg-gray-400 dark:hover:bg-gray-700 rounded-none shadow-sm">2</button>
      <span class="px-3 py-1 text-gray-700 dark:text-gray-300 hidden sm:block">...</span>
      <button class="px-3 py-1 border border-gray-600 dark:border-gray-400 bg-gray-300 dark:bg-gray-800 text-gray-700 dark:text-gray-300 transition-all duration-200 ease-in-out hover:bg-gray-400 dark:hover:bg-gray-700 rounded-none shadow-sm">10</button>
      <button class="px-3 py-1 border border-gray-600 dark:border-gray-400 bg-gray-300 dark:bg-gray-800 text-gray-700 dark:text-gray-300 transition-all duration-200 ease-in-out hover:bg-gray-400 dark:hover:bg-gray-700 rounded-none shadow-sm">11</button>
    </div>

    <button class="px-3 py-1 border border-gray-600 dark:border-gray-400 bg-gray-300 dark:bg-gray-800 text-gray-700 dark:text-gray-300 transition-all duration-200 ease-in-out hover:bg-gray-400 dark:hover:bg-gray-700 rounded-none font-bold shadow-sm">
      Next &gt;
    </button>
    <button class="px-3 py-1 border border-gray-600 dark:border-gray-400 bg-gray-300 dark:bg-gray-800 text-gray-700 dark:text-gray-300 transition-all duration-200 ease-in-out hover:bg-gray-400 dark:hover:bg-gray-700 rounded-none font-bold shadow-sm">
      Last &gt;&gt;
    </button>
  </div>

  <div class="mt-4 sm:mt-0 text-center">
    <span class="text-gray-700 dark:text-gray-300">Page <span class="font-bold">2</span> of <span class="font-bold">11</span></span>
  </div>
</nav>