<div class="flex justify-center">
  <nav class="w-full">
    <ul class="flex justify-center py-2 text-gray-500 dark:text-gray-300 list-style-none">
      <li><a href="#" class="px-3 hover:underline">Previous</a></li>
      <li><a href="#" class="p-2 px-3 rounded hover:bg-blue-300 hover:text-white">1</a></li>
      <li><a href="#" class="p-2 px-3 rounded hover:bg-blue-300 hover:text-white">2</a></li>
      <li><span class="p-2 px-3 font-bold text-blue-400">3</span></li>
      <li><a href="#" class="p-2 px-3 rounded hover:bg-blue-300 hover:text-white">4</a></li>
      <li><a href="#" class="p-2 px-3 rounded hover:bg-blue-300 hover:text-white">5</a></li>
      <li><a href="#" class="px-3 hover:underline">Next</a></li>
    </ul>
  </nav>
</div>

<div class="mx-4 text-sm text-gray-500 dark:text-gray-300">
  <hr class="w-full border-gray-100" />
  <div class="flex justify-center px-4 py-2">
  <div><a href="#" class="hover:underline">Previous</a></div>
  <nav class="w-full -my-px bg-red">
    <ul class="flex justify-center list-style-none">
      <li><a href="#" class="p-2 px-3 rounded hover:bg-blue-500 hover:text-white">1</a></li>
      <li><a href="#" class="p-2 px-3 rounded hover:bg-blue-500 hover:text-white">2</a></li>
      <li><span class="p-2 px-3 font-bold text-blue-400 border-t border-blue-400">3</span></li>
      <li><a href="#" class="p-2 px-3 rounded hover:bg-blue-500 hover:text-white">4</a></li>
      <li><a href="#" class="p-2 px-3 rounded hover:bg-blue-500 hover:text-white">5</a></li>     
    </ul>
  </nav>
  <div>
    <a href="#" class="flex hover:underline">Next</a>
  </div>
  </div>
</div>

<div class="flex justify-center">
  <nav class="flex -space-x-px text-gray-500 dark:text-gray-200">
    <a href="#" class="px-2 py-2 border border-gray-300 rounded-l hover:bg-gray-200 dark:hover:bg-gray-500"">
      <svg class="w-5 h-4 mt-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
      </svg>
    </a>
    <a href="#" class="px-4 py-2 border border-gray-300 hover:bg-gray-200 dark:hover:bg-gray-500"">1</a>
    <a href="#" class="px-4 py-2 border border-gray-300 hover:bg-gray-200 dark:hover:bg-gray-500"">2</a>
    <span href="#" class="px-4 py-2 bg-blue-100 border border-gray-300 hover:bg-gray-200 dark:bg-gray-400 dark:text-white">3</span>
    <a href="#" class="px-4 py-2 border border-gray-300 hover:bg-gray-200 dark:hover:bg-gray-500"">...</a>
    <a href="#" class="px-4 py-2 border border-gray-300 hover:bg-gray-200 dark:hover:bg-gray-500"">100</a>
    <a href="#" class="px-2 py-2 border border-gray-300 rounded-r hover:bg-gray-200 dark:hover:bg-gray-500"">
      <svg class="w-5 h-4 mt-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
      </svg>
    </a>
  </nav>
</div>

<div class="grid grid-cols-1 text-gray-600 xl:grid-cols-2 dark:text-white">
  <div class="p-2 m-auto dark:text-gray-200 xl:m-0">Showing <strong>1</strong> - <strong>40</strong> of <strong>165</strong> results</div>
  <nav class="flex m-auto dark:text-gray-200 xl:m-0">
    <a href="#" class="py-2 mx-2 text-blue-400 hover:underline">Previous</a>
    <a href="#" class="px-4 py-2 border border-gray-300 md:mx-2 hover:bg-gray-200 dark:hover:bg-gray-500">1</a>
    <a href="#" class="px-4 py-2 border border-gray-300 md:mx-2 hover:bg-gray-200 dark:hover:bg-gray-500"">2</a>
    <span class="px-4 py-2 text-white bg-blue-500 border border-gray-300 md:mx-2 dark:bg-gray-400 dark:text-white">3</span>
    <a href="#" class="px-4 py-2 border border-gray-300 md:mx-2 hover:bg-gray-200 dark:hover:bg-gray-500"">4</a>
    <a href="#" class="px-4 py-2 border border-gray-300 md:mx-2 hover:bg-gray-200 dark:hover:bg-gray-500"">5</a>
    <span class="py-2 mx-2 hover:bg-gray-200">...</span>
    <a href="#" class="py-2 mx-2 text-blue-400 hover:underline">Next</a>
  </nav>
</div>