Design your space exactly how you want it !
<div>
<ul class="inline-flex items-center h-10 text-base font-spline_sans dk-border-one divide-x dark:divide-dark-border">
<li>
<a href="#" class="paginate px-3 text-primary-500">
<i class="ri-arrow-left-s-line text-inherit"></i>
</a>
</li>
<li>
<a href="#" class="paginate">1</a>
</li>
<li>
<a href="#" class="paginate">2</a>
</li>
<li>
<a href="#" class="paginate">3</a>
</li>
<li>
<a href="#" class="paginate active">4</a>
</li>
<li>
<a href="#" class="paginate">5</a>
</li>
<li>
<a href="#" class="paginate px-3 text-primary-500">
<i class="ri-arrow-right-s-line text-inherit"></i>
</a>
</li>
</ul>
</div>
<div>
<ul class="inline-flex items-center h-10 text-base font-spline_sans dk-border-one divide-x dark:divide-dark-border">
<li>
<a href="#" class="paginate px-3 text-primary-500">
<i class="ri-arrow-left-double-line text-inherit"></i>
</a>
</li>
<li>
<a href="#" class="paginate">1</a>
</li>
<li>
<a href="#" class="paginate">2</a>
</li>
<li>
<a href="#" class="paginate active">3</a>
</li>
<li>
<a href="#" class="paginate">4</a>
</li>
<li>
<a href="#" class="paginate">5</a>
</li>
<li>
<a href="#" class="paginate px-3 text-primary-500">
<i class="ri-arrow-right-double-line text-inherit"></i>
</a>
</li>
</ul>
</div>
<div>
<ul class="inline-flex items-center h-10 text-base font-spline_sans divide-x dark:divide-dark-border shadow-paginate-shadow">
<li>
<a href="#" class="paginate px-3 text-primary-500">
<i class="ri-arrow-left-s-line text-inherit"></i>
</a>
</li>
<li>
<a href="#" class="paginate">1</a>
</li>
<li>
<a href="#" class="paginate">2</a>
</li>
<li>
<a href="#" class="paginate active">3</a>
</li>
<li>
<a href="#" class="paginate">4</a>
</li>
<li>
<a href="#" class="paginate">5</a>
</li>
<li>
<a href="#" class="paginate px-3 text-primary-500">
<i class="ri-arrow-right-s-line text-inherit"></i>
</a>
</li>
</ul>
</div>
<div>
<ul class="inline-flex items-center h-10 text-base font-spline_sans divide-x dark:divide-dark-border shadow-paginate-shadow">
<li>
<a href="#" class="paginate px-3 text-primary-500">
<i class="ri-arrow-left-double-line text-inherit"></i>
</a>
</li>
<li>
<a href="#" class="paginate">1</a>
</li>
<li>
<a href="#" class="paginate">2</a>
</li>
<li>
<a href="#" class="paginate">3</a>
</li>
<li>
<a href="#" class="paginate active">4</a>
</li>
<li>
<a href="#" class="paginate">5</a>
</li>
<li>
<a href="#" class="paginate px-3 text-primary-500">
<i class="ri-arrow-right-double-line text-inherit"></i>
</a>
</li>
</ul>
</div>
<div>
<ul class="inline-flex items-center -space-x-px h-10 text-base font-spline_sans">
<li>
<a href="#" class="paginate rounded-full size-10 text-primary-500">
<i class="ri-arrow-left-s-line text-inherit"></i>
</a>
</li>
<li>
<a href="#" class="paginate rounded-full size-10">1</a>
</li>
<li>
<a href="#" class="paginate rounded-full size-10">2</a>
</li>
<li>
<a href="#" class="paginate active rounded-full size-10">3</a>
</li>
<li>
<a href="#" class="paginate rounded-full size-10">4</a>
</li>
<li>
<a href="#" class="paginate rounded-full size-10">5</a>
</li>
<li>
<button disabled type="button" class="px-1.5 rotate-90 text-disable">
<i class="ri-more-2-fill text-inherit"></i>
</button>
</li>
<li>
<a href="#" class="paginate rounded-full size-10">10</a>
</li>
<li>
<a href="#" class="paginate rounded-full size-10 px-3 text-primary-500">
<i class="ri-arrow-right-s-line text-inherit"></i>
</a>
</li>
</ul>
</div>
<div>
<ul class="inline-flex items-center space-x-1 h-10 text-base font-spline_sans">
<li>
<a href="#" class="paginate rounded-md rotate-45 size-10 text-primary-500">
<span class="-rotate-45"><i class="ri-arrow-left-line text-inherit"></i></span>
</a>
</li>
<li>
<a href="#" class="paginate rounded-md rotate-45 size-10"><span class="-rotate-45">1</span></a>
</li>
<li>
<a href="#" class="paginate rounded-md rotate-45 size-10"><span class="-rotate-45">2</span></a>
</li>
<li>
<a href="#" class="paginate active rounded-md rotate-45 size-10"><span class="-rotate-45">3</span></a>
</li>
<li>
<a href="#" class="paginate rounded-md rotate-45 size-10"><span class="-rotate-45">4</span></a>
</li>
<li>
<a href="#" class="paginate rounded-md rotate-45 size-10"><span class="-rotate-45">5</span></a>
</li>
<li>
<button disabled type="button" class="px-1.5 rotate-90 text-disable">
<i class="ri-more-2-fill text-inherit"></i>
</button>
</li>
<li>
<a href="#" class="paginate rounded-md rotate-45 size-10"><span class="-rotate-45">123</span></a>
</li>
<li>
<a href="#" class="paginate rounded-md rotate-45 size-10 text-primary-500">
<span class="-rotate-45"><i class="ri-arrow-right-line text-inherit"></i></span>
</a>
</li>
</ul>
</div>
<div class="flex justify-between items-center font-spline_sans">
<div class="flex items-center font-urbanist font-medium">
<a href="#" class="text-gray-500 dark:text-dark-text">
<i class="ri-arrow-left-s-line text-inherit text-2xl"></i>
</a>
<span class="ml-4 text-gray-500 dark:text-dark-text">Page</span>
<select class="form-input p-0 px-1 mx-2 w-8 h-10">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option selected value="3">10</option>
</select>
<span class="mr-4 text-gray-500 dark:text-dark-text">Of / 64</span>
<a href="#" class="text-gray-500 dark:text-dark-text">
<i class="ri-arrow-right-s-line text-inherit text-2xl"></i>
</a>
</div>
<ul class="flex mx-4 gap-x-2">
<li>
<a href="#" class="count-paginate">
01
</a>
</li>
<li>
<a href="#" class="count-paginate active">
02
</a>
</li>
<li>
<a href="#" class="count-paginate">
03
</a>
</li>
<li>
<a href="#" class="count-paginate">
<i class="ri-arrow-right-line text-inherit"></i>
</a>
</li>
</ul>
</div>
<div>
<ul class="inline-flex items-center h-10 text-base font-spline_sans dk-border-one divide-x dark:divide-dark-border rounded-full overflow-hidden">
<li>
<a href="#" class="paginate px-3 text-gray-900 dark:text-dark-text">
<i class="ri-arrow-left-line text-inherit"></i>
</a>
</li>
<li>
<a href="#" class="paginate">1</a>
</li>
<li>
<a href="#" class="paginate active">2</a>
</li>
<li class="flex">
<button disabled type="button" class="px-1.5 rotate-90 text-disable">
<i class="ri-more-2-fill text-inherit"></i>
</button>
<a href="#" class="paginate px-3">10</a>
</li>
<li>
<a href="#" class="paginate px-3 text-gray-900 dark:text-dark-text">
<i class="ri-arrow-right-line text-inherit"></i>
</a>
</li>
</ul>
</div>
<div class="flex items-center gap-x-2">
<a href="#" class="paginate rounded-full size-16 bg-[#F3F3F3] dark:bg-dark-card-shade text-primary-500">
<i class="ri-arrow-left-s-line text-inherit text-4xl"></i>
</a>
<ul class="inline-flex items-center space-x-2 p-3 text-base font-spline_sans rounded-full bg-[#F3F3F3] dark:bg-dark-card-shade">
<li>
<a href="#" class="paginate rounded-full size-10 bg-white dark:bg-dark-icon shadow-paginate-shadow">1</a>
</li>
<li>
<a href="#" class="paginate rounded-full size-10 bg-white dark:bg-dark-icon shadow-paginate-shadow">2</a>
</li>
<li>
<a href="#" class="paginate active rounded-full size-10 bg-white dark:bg-dark-icon shadow-paginate-shadow">3</a>
</li>
<li>
<a href="#" class="paginate rounded-full size-10 bg-white dark:bg-dark-icon rotate-90 shadow-paginate-shadow"><i class="ri-more-2-fill text-inherit"></i></a>
</li>
<li>
<a href="#" class="paginate rounded-full size-10 bg-white dark:bg-dark-icon">10</a>
</li>
</ul>
<a href="#" class="paginate rounded-full size-16 bg-[#F3F3F3] dark:bg-dark-card-shade px-3 text-primary-500">
<i class="ri-arrow-right-s-line text-inherit text-4xl"></i>
</a>
</div>
<div>
<ul class="inline-flex items-center space-x-1 p-3 text-base font-spline_sans rounded-full shadow-paginate-shadow">
<li>
<a href="#" class="paginate hover:bg-transparent border border-transparent hover:border-primary-500 rounded-full size-10 text-primary-500 hover:text-primary-500">
<i class="ri-arrow-left-s-line text-inherit text-[30px]"></i>
</a>
</li>
<li>
<a href="#" class="stock-paginate">1</a>
</li>
<li>
<a href="#" class="stock-paginate">2</a>
</li>
<li>
<a href="#" class="stock-paginate active">3</a>
</li>
<li>
<button disabled type="button" class="px-1.5 rotate-90 text-disable">
<i class="ri-more-2-fill text-inherit"></i>
</button>
</li>
<li>
<a href="#" class="stock-paginate">10</a>
</li>
<li>
<a href="#" class="paginate [&.active]:border-primary-500 [&.active]:bg-transparent [&.active]:text-primary-500 hover:bg-transparent border border-transparent hover:border-primary-500 hover:text-primary-500 rounded-full size-10 px-3 text-primary-500">
<i class="ri-arrow-right-s-line text-inherit text-[30px]"></i>
</a>
</li>
</ul>
</div>