<div class="flex items-center justify-between">
<p class="mb-0 text-sm">
Items per pages: <strong>5</strong>
</p>
<div class="flex items-center">
<p class="mb-0 text-sm">
1 – 5 of 10
</p>
<ol class="ltr:ml-[10px] rtl:mr-[10px]">
<li class="inline-block mx-[3px] ltr:first:ml-0 ltr:last:mr-0 rtl:first:mr-0 rtl:last:ml-0">
<a href="#" class="w-[31px] h-[31px] block leading-[29px] relative text-center rounded-md border border-gray-100 dark:border-[#172036] transition-all hover:bg-primary-500 hover:text-white hover:border-primary-500">
    <span class="opacity-0">
        0
    </span>
    <i class="material-symbols-outlined left-0 right-0 absolute top-1/2 -translate-y-1/2">
        chevron_left
    </i>
</a>
</li>
<li class="inline-block mx-[3px] ltr:first:ml-0 ltr:last:mr-0 rtl:first:mr-0 rtl:last:ml-0">
<a href="#" class="w-[31px] h-[31px] block leading-[29px] relative text-center rounded-md border border-gray-100 dark:border-[#172036] transition-all hover:bg-primary-500 hover:text-white hover:border-primary-500">
    <span class="opacity-0">
        0
    </span>
    <i class="material-symbols-outlined left-0 right-0 absolute top-1/2 -translate-y-1/2">
        chevron_right
    </i>
</a>
</li>
</ol>
</div>
</div>

<div class="sm:flex sm:items-center justify-between">
<p class="mb-0">
Showing 9 of 36 results
</p>
<ol class="mt-[10px] sm:mt-0">
<li class="inline-block mx-[3px] ltr:first:ml-0 ltr:last:mr-0 rtl:first:mr-0 rtl:last:ml-0">
<a href="#" class="w-[31px] h-[31px] block leading-[29px] relative text-center rounded-md border border-gray-100 dark:border-[#172036] transition-all hover:bg-primary-500 hover:text-white hover:border-primary-500">
<span class="opacity-0">
    0
</span>
<i class="material-symbols-outlined left-0 right-0 absolute top-1/2 -translate-y-1/2">
    chevron_left
</i>
</a>
</li>
<li class="inline-block mx-[3px] ltr:first:ml-0 ltr:last:mr-0 rtl:first:mr-0 rtl:last:ml-0">
<a href="#" class="w-[31px] h-[31px] block leading-[29px] relative text-center rounded-md border border-primary-500 bg-primary-500 text-white">
1
</a>
</li>
<li class="inline-block mx-[3px] ltr:first:ml-0 ltr:last:mr-0 rtl:first:mr-0 rtl:last:ml-0">
<a href="#" class="w-[31px] h-[31px] block leading-[29px] relative text-center rounded-md border border-gray-100 dark:border-[#172036] transition-all hover:bg-primary-500 hover:text-white hover:border-primary-500">
2
</a>
</li>
<li class="inline-block mx-[3px] ltr:first:ml-0 ltr:last:mr-0 rtl:first:mr-0 rtl:last:ml-0">
<a href="#" class="w-[31px] h-[31px] block leading-[29px] relative text-center rounded-md border border-gray-100 dark:border-[#172036] transition-all hover:bg-primary-500 hover:text-white hover:border-primary-500">
3
</a>
</li>
<li class="inline-block mx-[3px] ltr:first:ml-0 ltr:last:mr-0 rtl:first:mr-0 rtl:last:ml-0">
<a href="#" class="w-[31px] h-[31px] block leading-[29px] relative text-center rounded-md border border-gray-100 dark:border-[#172036] transition-all hover:bg-primary-500 hover:text-white hover:border-primary-500">
4
</a>
</li>
<li class="inline-block mx-[3px] ltr:first:ml-0 ltr:last:mr-0 rtl:first:mr-0 rtl:last:ml-0">
<a href="#" class="w-[31px] h-[31px] block leading-[29px] relative text-center rounded-md border border-gray-100 dark:border-[#172036] transition-all hover:bg-primary-500 hover:text-white hover:border-primary-500">
<span class="opacity-0">
    0
</span>
<i class="material-symbols-outlined left-0 right-0 absolute top-1/2 -translate-y-1/2">
    chevron_right
</i>
</a>
</li>
</ol>
</div>