<div class="flex flex-col lg:flex-row justify-between">
    <div class="flex flex-col lg:flex-row items-center space-x-2 text-xs">
      <button class="py-2 px-4 bg-white text-gray-600 font-medium rounded hover:bg-gray-100 active:bg-gray-200 disabled:opacity-50 inline-flex items-center">
        10 items
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-2" viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
        </svg>
      </button>

      <p class="text-gray-500 mt-4 lg:mt-0">Showing 11 to 20 of 95 entires</p>
    </div>

    <nav aria-label="Pagination" class="flex justify-center items-center text-gray-600 mt-8 lg:mt-0">
      <a href="#" class="p-2 mr-4 rounded hover:bg-gray-100">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
        </svg>
      </a>
      <a href="#" class="px-4 py-2 rounded hover:bg-gray-100"> 1 </a>
      <a href="#" class="px-4 py-2 rounded bg-gray-200 text-gray-900 font-medium hover:bg-gray-100"> 2 </a>
      <a href="#" class="px-4 py-2 rounded hover:bg-gray-100"> 3 </a>
      <a href="#" class="px-4 py-2 rounded hover:bg-gray-100"> ... </a>
      <a href="#" class="px-4 py-2 rounded hover:bg-gray-100"> 9 </a>
      <a href="#" class="p-2 ml-4 rounded hover:bg-gray-100">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
        </svg>
      </a>
    </nav>
  </div>
                    
                

                    
                         <nav aria-label="Pagination" class="flex items-center text-gray-600">
    <a href="#" class="p-2 mr-4 rounded hover:bg-gray-100">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
      </svg>
    </a>
    <a href="#" class="px-4 py-2 rounded hover:bg-gray-100"> 1 </a>
    <a href="#" class="px-4 py-2 rounded bg-gray-200 text-gray-900 font-medium hover:bg-gray-100"> 2 </a>
    <a href="#" class="px-4 py-2 rounded hover:bg-gray-100"> 3 </a>
    <a href="#" class="px-4 py-2 rounded hover:bg-gray-100"> ... </a>
    <a href="#" class="px-4 py-2 rounded hover:bg-gray-100"> 9 </a>
    <a href="#" class="p-2 ml-4 rounded hover:bg-gray-100">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
      </svg>
    </a>
  </nav>
                    
                

                    
                         <!-- Pagination -->
<ul class="flex items-center space-x-1 font-light">
  <li
    class="border border-gray-300 rounded-full text-gray-500 hover:bg-gray-200 hover:border-gray-200 bg-white"
  >
    <a href="#" class="w-8 h-8 flex items-center justify-center">1</a>
  </li>
  <li class="border rounded-full bg-indigo-500 border-indigo-500 text-white">
    <a href="#" class="w-8 h-8 flex items-center justify-center">2</a>
  </li>
  <li
    class="border border-gray-300 rounded-full text-gray-500 hover:bg-gray-200 hover:border-gray-200 bg-white"
  >
    <a href="#" class="w-8 h-8 flex items-center justify-center">3</a>
  </li>
  <li
    class="border border-gray-300 rounded-full text-gray-500 hover:bg-gray-200 hover:border-gray-200 bg-white"
  >
    <a href="#" class="w-8 h-8 flex items-center justify-center">4</a>
  </li>
  <li
    class="border border-gray-300 rounded-full text-gray-500 hover:bg-gray-200 hover:border-gray-200 bg-white"
  >
    <a href="#" class="w-8 h-8 flex items-center justify-center">5</a>
  </li>
</ul>

<!-- Pagination with arrows -->
<ul class="flex items-center space-x-1 font-light">
  <li
    class="border border-gray-300 rounded-full text-gray-500 hover:bg-gray-200 hover:border-gray-200 bg-white"
  >
    <a href="#" class="w-8 h-8 flex items-center justify-center">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="h-4 w-4"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M15 19l-7-7 7-7"
        />
      </svg>
    </a>
  </li>
  <li
    class="border border-gray-300 rounded-full text-gray-500 hover:bg-gray-200 hover:border-gray-200 bg-white"
  >
    <a href="#" class="w-8 h-8 flex items-center justify-center">1</a>
  </li>
  <li class="border rounded-full bg-indigo-500 border-indigo-500 text-white">
    <a href="#" class="w-8 h-8 flex items-center justify-center">2</a>
  </li>
  <li
    class="border border-gray-300 rounded-full text-gray-500 hover:bg-gray-200 hover:border-gray-200 bg-white"
  >
    <a href="#" class="w-8 h-8 flex items-center justify-center">3</a>
  </li>
  <li
    class="border border-gray-300 rounded-full text-gray-500 hover:bg-gray-200 hover:border-gray-200 bg-white"
  >
    <a href="#" class="w-8 h-8 flex items-center justify-center">4</a>
  </li>
  <li
    class="border border-gray-300 rounded-full text-gray-500 hover:bg-gray-200 hover:border-gray-200 bg-white"
  >
    <a href="#" class="w-8 h-8 flex items-center justify-center">5</a>
  </li>
  <li
    class="border border-gray-300 rounded-full text-gray-500 hover:bg-gray-200 hover:border-gray-200 bg-white"
  >
    <a href="#" class="w-8 h-8 flex items-center justify-center">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="h-4 w-4"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M9 5l7 7-7 7"
        />
      </svg>
    </a>
  </li>
</ul>