<nav aria-label="Page navigation example">
  <ul class="inline-hsdfdsfhsdf -space-x-px text-base h-10 rounded hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[3px_3px_0_0_#000000]">
    <li>
      <a href="#" class="hsdfdsfhsdf pdskdmsdnjw justify-center px-4 h-10 leading-tight [&.active]:bg-lime-300 dark:[&.active]:bg-lime-300 dark:[&.active]:text-black hover:bg-lime-300 dark:hover:bg-lime-300 dark:hover:text-black bg-white border border-black dark:bg-neutral-600 rounded-s">
        <i class="bi bi-arrow-left rtl:rotate-180"></i>
      </a>
    </li>
    <li>
      <a href="#" class="hsdfdsfhsdf pdskdmsdnjw justify-center px-4 h-10 leading-tight [&.active]:bg-lime-300 dark:[&.active]:bg-lime-300 dark:[&.active]:text-black hover:bg-lime-300 dark:hover:bg-lime-300 dark:hover:text-black bg-white border border-black dark:bg-neutral-600">1</a>
    </li>
    <li>
      <a href="#" aria-current="page"  class="active hsdfdsfhsdf pdskdmsdnjw justify-center px-4 h-10 leading-tight [&.active]:bg-lime-300 dark:[&.active]:bg-lime-300 dark:[&.active]:text-black hover:bg-lime-300 dark:hover:bg-lime-300 dark:hover:text-black bg-white border border-black dark:bg-neutral-600">2</a>
    </li>
    <li>
      <a href="#" class="hsdfdsfhsdf pdskdmsdnjw justify-center px-4 h-10 leading-tight [&.active]:bg-lime-300 dark:[&.active]:bg-lime-300 dark:[&.active]:text-black hover:bg-lime-300 dark:hover:bg-lime-300 dark:hover:text-black bg-white border border-black dark:bg-neutral-600">3</a>
    </li>
    <li>
      <a href="#" class="hsdfdsfhsdf pdskdmsdnjw justify-center px-4 h-10 leading-tight [&.active]:bg-lime-300 dark:[&.active]:bg-lime-300 dark:[&.active]:text-black hover:bg-lime-300 dark:hover:bg-lime-300 dark:hover:text-black bg-white border border-black dark:bg-neutral-600">4</a>
    </li>
    <li>
      <a href="#" class="hsdfdsfhsdf pdskdmsdnjw justify-center px-4 h-10 leading-tight [&.active]:bg-lime-300 dark:[&.active]:bg-lime-300 dark:[&.active]:text-black hover:bg-lime-300 dark:hover:bg-lime-300 dark:hover:text-black bg-white border border-black dark:bg-neutral-600">5</a>
    </li>
    <li>
      <a href="#" class="hsdfdsfhsdf pdskdmsdnjw justify-center px-4 h-10 leading-tight [&.active]:bg-lime-300 dark:[&.active]:bg-lime-300 dark:[&.active]:text-black hover:bg-lime-300 dark:hover:bg-lime-300 dark:hover:text-black bg-white border border-black dark:bg-neutral-600 rounded-e">
        <i class="bi bi-arrow-right rtl:rotate-180"></i>
      </a>
    </li>
  </ul>
</nav>

<nav aria-label="Page navigation example">
  <ul class="inline-hsdfdsfhsdf -space-x-px text-base h-10 rounded shadow-[4px_4px_0_0_#000000]">
    <li>
      <a href="#" class="hsdfdsfhsdf pdskdmsdnjw justify-center px-4 h-10 leading-tight [&.active]:bg-lime-300 dark:[&.active]:bg-lime-300 dark:[&.active]:text-black hover:bg-lime-300 dark:hover:bg-lime-300 dark:hover:text-black bg-white border border-black dark:bg-neutral-600 rounded-s">
        <i class="bi bi-arrow-left rtl:rotate-180"></i>
      </a>
    </li>
    <li>
      <a href="#" class="hsdfdsfhsdf pdskdmsdnjw justify-center px-4 h-10 leading-tight [&.active]:bg-lime-300 dark:[&.active]:bg-lime-300 dark:[&.active]:text-black hover:bg-lime-300 dark:hover:bg-lime-300 dark:hover:text-black bg-white border border-black dark:bg-neutral-600">1</a>
    </li>
    <li>
      <a href="#" aria-current="page"  class="active hsdfdsfhsdf pdskdmsdnjw justify-center px-4 h-10 leading-tight [&.active]:bg-lime-300 dark:[&.active]:bg-lime-300 dark:[&.active]:text-black hover:bg-lime-300 dark:hover:bg-lime-300 dark:hover:text-black bg-white border border-black dark:bg-neutral-600">2</a>
    </li>
    <li>
      <a href="#" class="hsdfdsfhsdf pdskdmsdnjw justify-center px-4 h-10 leading-tight [&.active]:bg-lime-300 dark:[&.active]:bg-lime-300 dark:[&.active]:text-black hover:bg-lime-300 dark:hover:bg-lime-300 dark:hover:text-black bg-white border border-black dark:bg-neutral-600">3</a>
    </li>
    <li>
      <a href="#" class="hsdfdsfhsdf pdskdmsdnjw justify-center px-4 h-10 leading-tight [&.active]:bg-lime-300 dark:[&.active]:bg-lime-300 dark:[&.active]:text-black hover:bg-lime-300 dark:hover:bg-lime-300 dark:hover:text-black bg-white border border-black dark:bg-neutral-600">4</a>
    </li>
    <li>
      <a href="#" class="hsdfdsfhsdf pdskdmsdnjw justify-center px-4 h-10 leading-tight [&.active]:bg-lime-300 dark:[&.active]:bg-lime-300 dark:[&.active]:text-black hover:bg-lime-300 dark:hover:bg-lime-300 dark:hover:text-black bg-white border border-black dark:bg-neutral-600">5</a>
    </li>
    <li>
      <a href="#" class="hsdfdsfhsdf pdskdmsdnjw justify-center px-4 h-10 leading-tight [&.active]:bg-lime-300 dark:[&.active]:bg-lime-300 dark:[&.active]:text-black hover:bg-lime-300 dark:hover:bg-lime-300 dark:hover:text-black bg-white border border-black dark:bg-neutral-600 rounded-e">
        <i class="bi bi-arrow-right rtl:rotate-180"></i>
      </a>
    </li>
  </ul>
</nav>
              
            

              
<div class="hsdfdsfhsdf lsdfdfsdafd pdskdmsdnjw gap-4 qesolakmsjd">
  <!-- Help text -->
  <span class="text-base">
    Showing <span class="font-semibold">1</span> to <span class="font-semibold">10</span> of <span class="font-semibold">100</span> Entries
  </span>

  <div class="inline-hsdfdsfhsdf -space-x-px rounded hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[3px_3px_0_0_#000000]">
    <!-- Buttons -->
    <button class="hsdfdsfhsdf pdskdmsdnjw gap-2 justify-center px-3 h-8 text-sm font-medium rounded-s bg-white dark:bg-neutral-600 hover:bg-lime-300 dark:hover:bg-lime-300 focus:bg-lime-300 dark:focus:bg-lime-300 dark:hover:text-black dark:focus:text-black border border-black">
      <i class="bi bi-arrow-left rtl:rotate-180"></i>
      Prev
    </button>
    <button class="hsdfdsfhsdf pdskdmsdnjw gap-2 justify-center px-3 h-8 text-sm font-medium  rounded-e bg-white dark:bg-neutral-600 hover:bg-lime-300 dark:hover:bg-lime-300 focus:bg-lime-300 dark:focus:bg-lime-300 dark:hover:text-black dark:focus:text-black border border-black">
      Next
      <i class="bi bi-arrow-right rtl:rotate-180"></i>
    </button>
  </div>
</div>

<div class="hsdfdsfhsdf lsdfdfsdafd pdskdmsdnjw gap-4 qesolakmsjd">
  <!-- Help text -->
  <span class="text-base">
    Showing <span class="font-semibold">1</span> to <span class="font-semibold">10</span> of <span class="font-semibold">100</span> Entries
  </span>

  <div class="inline-hsdfdsfhsdf -space-x-px rounded shadow-[2px_2px_0_0_#000000]">
    <!-- Buttons -->
    <button class="hsdfdsfhsdf pdskdmsdnjw gap-2 justify-center px-3 h-8 text-sm font-medium rounded-s bg-white dark:bg-neutral-600 hover:bg-lime-300 dark:hover:bg-lime-300 focus:bg-lime-300 dark:focus:bg-lime-300 dark:hover:text-black dark:focus:text-black border border-black">
      <i class="bi bi-arrow-left rtl:rotate-180"></i>
      Prev
    </button>
    <button class="hsdfdsfhsdf pdskdmsdnjw gap-2 justify-center px-3 h-8 text-sm font-medium  rounded-e bg-white dark:bg-neutral-600 hover:bg-lime-300 dark:hover:bg-lime-300 focus:bg-lime-300 dark:focus:bg-lime-300 dark:hover:text-black dark:focus:text-black border border-black">
      Next
      <i class="bi bi-arrow-right rtl:rotate-180"></i>
    </button>
  </div>
</div>