Artistic_Sepia_Pagination_Component

<nav class="flex items-center justify-between px-4 sm:px-6 lg:px-8 py-3 bg-gradient-to-br from-amber-50 to-amber-100 dark:from-stone-900 dark:to-stone-950 rounded-2xl shadow-xl font-sans text-stone-800 dark:text-stone-300 relative overflow-hidden" aria-label="Pagination">
  
  <!-- Background texture overlay -->
  <div class="absolute inset-0 opacity-20 dark:opacity-10" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZmlsdGVyIGlkPSJlZmZlY3QiPgogICAgPGZlVHVyYnVsZW5jZSB0eXBlPSJmcmFjdGFsdE5vaXNlIiBiYXNlRnJlcXVlbmN5PSIwLjA1IiBudW1PY3RhdmVzPSIxIiBzdGl0Y2hUYWlscz0icmFnd2VkIiBzdGl0Y2hUYWlscz0icmFnd2VkIiByZXN1bHQ9InR1cmJ1bGVuY2UiLz4KICAgIDxmZUNvbG9yTWF0cml4IHR5cGU9InNhdHVyYXRlIiB2YWx1ZXM9IjAiLz4KICAgIDxmZUNvbXBvc2l0ZSBpbj0iU291cmNlQWxwaGEiIGluMj0idHVyYnVsZW5jZSIgb3BlcmF0b3I9ImluIiByZXN1bHQ9ImJsdXJlZF9ub2lzZSIvPgogICAgPGZlQmxlbmQgaW49IldhdGVybWFyayIgJmlubzI9ImJsdXJlZF9ub2lzZSIgbW9kZT0ibXVsdGlwbHkiLz4KICA8L2ZpbHRlcj4KICA8cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJyZ2JhKDIxNywgMTk5LCAxNjgsIDAuMzUpIiBmaWx0ZXI9InVybCgjZWZmZWN0KSIgLz4KPC9zdmc+')"></div>

  <div class="flex-1 flex justify-between items-center">
    <!-- Previous Button -->
    <div class="w-auto md:w-1/3 order-1">
      <a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-medium rounded-full border border-stone-300 dark:border-stone-700 bg-stone-200 hover:bg-stone-300 dark:bg-stone-800 dark:hover:bg-stone-700 transition-colors duration-200 ease-in-out text-stone-700 dark:text-stone-300 shadow-sm group">
        <svg class="h-5 w-5 mr-2 -ml-1 text-stone-600 dark:text-stone-400 group-hover:text-stone-800 dark:group-hover:text-stone-200" 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.56 10l3.23 3.71a.75.75 0 11-1.06 1.06l-3.75-3.75a.75.75 0 010-1.06l3.75-3.75a.75.75 0 011.06 0z" clip-rule="evenodd" />
        </svg>
        <span class="hidden sm:inline">Previous</span>
        <span class="sm:hidden">Prev</span>
      </a>
    </div>

    <!-- Page Numbers (Desktop/Tablet) -->
    <div class="hidden md:flex justify-center flex-1 order-2 space-x-2">
      <a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-medium rounded-full border border-transparent text-stone-600 hover:text-stone-800 dark:text-stone-400 dark:hover:text-stone-200 transition-colors duration-200 ease-in-out">
        1
      </a>
      <a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-medium rounded-full border border-transparent text-stone-600 hover:text-stone-800 dark:text-stone-400 dark:hover:text-stone-200 transition-colors duration-200 ease-in-out">
        2
      </a>
      <a href="#" aria-current="page" class="relative z-10 inline-flex items-center px-4 py-2 text-sm font-semibold rounded-full border border-amber-400 dark:border-amber-600 bg-amber-300 dark:bg-amber-700 text-stone-900 dark:text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 focus:ring-offset-amber-50">3</a>
      <span class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-stone-500 dark:text-stone-500 rounded-full">
        ...
      </span>
      <a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-medium rounded-full border border-transparent text-stone-600 hover:text-stone-800 dark:text-stone-400 dark:hover:text-stone-200 transition-colors duration-200 ease-in-out">
        10
      </a>
    </div>

    <!-- Page Status (Mobile) -->
    <div class="flex md:hidden flex-1 justify-center order-2 text-sm font-medium text-stone-700 dark:text-stone-300">
      Page <span class="font-semibold mx-1">3</span> of <span class="font-semibold mx-1">10</span>
    </div>

    <!-- Next Button -->
    <div class="w-auto md:w-1/3 order-3 flex justify-end">
      <a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-medium rounded-full border border-stone-300 dark:border-stone-700 bg-stone-200 hover:bg-stone-300 dark:bg-stone-800 dark:hover:bg-stone-700 transition-colors duration-200 ease-in-out text-stone-700 dark:text-stone-300 shadow-sm group">
        <span class="hidden sm:inline">Next</span>
        <span class="sm:hidden">Next</span>
        <svg class="h-5 w-5 ml-2 -mr-1 text-stone-600 dark:text-stone-400 group-hover:text-stone-800 dark:group-hover:text-stone-200" 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.44 10 7.21 6.29a.75.75 0 111.06-1.06l3.75 3.75a.75.75 0 010 1.06l-3.75 3.75a.75.75 0 01-1.06 0z" clip-rule="evenodd" />
        </svg>
      </a>
    </div>
  </div>

  <!-- Entries label (Desktop Only) -->
  <div class="absolute hidden lg:flex left-8 top-1/2 -translate-y-1/2 text-sm text-stone-600 dark:text-stone-400">
    <p class="mr-2">Showing</p>
    <p class="font-semibold text-stone-800 dark:text-stone-200 inline-block">1</p>
    <p class="mx-1">to</p>
    <p class="font-semibold text-stone-800 dark:text-stone-200 inline-block">10</p>
    <p class="ml-1">of</p>
    <p class="font-semibold text-stone-800 dark:text-stone-200 inline-block ml-1">97</p>
    <p class="ml-1">entries</p>
  </div>

  <!-- Dropdown for Results per Page (Desktop Only) -->
  <div class="absolute hidden lg:flex right-8 top-1/2 -translate-y-1/2 text-sm text-stone-600 dark:text-stone-400 items-center">
    <label for="results-per-page" class="mr-2">Results Per Page:</label>
    <select id="results-per-page" name="results-per-page" class="block w-auto py-1.5 pl-3 pr-8 rounded-full border border-stone-300 dark:border-stone-700 bg-stone-100 dark:bg-stone-800 text-stone-800 dark:text-stone-300 sm:text-sm shadow-sm focus:border-amber-500 focus:ring-amber-500 transition-colors duration-200 ease-in-out cursor-pointer">
      <option value="10" selected>10</option>
      <option value="25">25</option>
      <option value="50">50</option>
      <option value="100">100</option>
    </select>
  </div>

</nav>