Advanced Pagination Using Tailwind UI
Experience seamless navigation through content with the Advanced Pagination component, inspiration designed by @janm_ux on Instagram. Elevate your browsing journey with style and functionality.
opagination
Loading component...
271 lines
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"
rel="stylesheet">
<style>
.body {
font-family: 'Plus Jakarta Sans', sans-serif;
}
</style>
<div class="bg-gray-100 min-h-screen flex items-center justify-center px-32">
<div class="w-full flex flex-col mb-12 space-y-8 ">
<div class="flex text-gray-700 p-4 bg-white rounded-md justify-end w-full items-center space-x-16">
<div>
<form action="">
<div class="relative">
<select
class="block appearance-none w-full bg-gray-100 text-gray-700 py-3 px-4 pr-8 rounded-lg leading-tight focus:outline-none focus:bg-white focus:border-gray-500">
<option selected>10</option>
<option>20</option>
<option>50</option>
<option>100</option>
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M12 16L6 10H18L12 16Z"></path>
</svg>
</div>
</div>
</form>
</div>
<div class="flex items-center space-x-4">
<div
class="h-12 w-12 mr-1 flex justify-center items-center rounded-full bg-gray-200 hover:bg-gray-300 cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="feather feather-chevron-left w-6 h-6">
<polyline points="15 18 9 12 15 6"></polyline>
</svg>
</div>
<div class="flex font-medium text-sm rounded-full">
<p>Results 150 - 160 of 106</p>
</div>
<div
class="h-12 w-12 ml-1 flex justify-center items-center rounded-full bg-gray-200 hover:bg-gray-300 cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="feather feather-chevron-right w-6 h-6">
<polyline points="9 18 15 12 9 6"></polyline>
</svg>
</div>
</div>
<div class="flex items-center">
<p class="text-gray-800 font-medium text-sm mr-2">Go to:</p>
<form action="">
<input type="text"
class="appearance-none w-24 bg-gray-100 text-gray-700 py-3 px-4 rounded-lg leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
placeholder="e.g. 102">
</form>
</div>
</div>
<div class="flex text-gray-700 justify-around rounded-md p-4 bg-white w-full items-center space-x-16">
<div class="flex items-center">
<div class="flex font-medium text-sm rounded-full">
<p>Results 150 - 160 of 1096</p>
</div>
</div>
<div class="flex h-12 text-sm font-medium space-x-3">
<div
class="px-4 flex justify-center items-center cursor-pointer leading-5 transition duration-150 ease-in bg-gray-200 rounded-lg hover:bg-gray-400 hover:text-gray-50 ">
Previous
</div>
<div
class="w-12 flex justify-center items-center cursor-pointer leading-5 transition duration-150 ease-in bg-gray-200 rounded-full hover:bg-gray-400 hover:text-gray-50 ">
13
</div>
<div
class="w-12 flex justify-center items-center cursor-pointer leading-5 transition duration-150 ease-in bg-gray-200 rounded-full hover:bg-gray-400 hover:text-gray-50 ">
14
</div>
<div
class="w-12 flex justify-center items-center cursor-pointer leading-5 transition duration-150 ease-in rounded-full bg-gray-800 text-white hover:text-gray-50 hover:bg-gray-700">
15
</div>
<div
class="w-12 flex justify-center items-center cursor-pointer leading-5 transition duration-150 ease-in bg-gray-200 rounded-full hover:bg-gray-400 hover:text-gray-50 ">
16
</div>
<div
class="w-12 flex justify-center items-center cursor-pointer leading-5 transition duration-150 ease-in bg-gray-200 rounded-full hover:bg-gray-400 hover:text-gray-50 ">
17
</div>
<div
class="px-4 flex justify-center items-center cursor-pointer leading-5 transition duration-150 ease-in bg-gray-200 rounded-lg hover:bg-gray-400 hover:text-gray-50 ">
Next
</div>
</div>
<div class="flex items-center">
<p class="text-gray-800 font-medium text-sm mr-2">Go to:</p>
<form action="">
<input type="text"
class="appearance-none w-24 bg-gray-100 text-gray-700 py-3 px-4 rounded-lg leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
placeholder="e.g. 102">
</form>
</div>
</div>
<div class="flex text-gray-700 justify-end rounded-md p-4 bg-white w-full items-center space-x-16">
<div class="flex items-center">
<div class="flex font-medium text-sm rounded-full">
<p>Results 150 - 160 of 1096</p>
</div>
</div>
<div class="flex h-12 text-sm font-medium space-x-3">
<div
class="w-12 h-12 flex justify-center items-center cursor-pointer leading-5 transition duration-150 ease-in bg-gray-200 rounded-full hover:bg-gray-400 hover:text-gray-50 ">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="feather feather-chevron-left w-6 h-6">
<polyline points="15 18 9 12 15 6"></polyline>
</svg>
</div>
<div
class="w-12 flex justify-center items-center cursor-pointer leading-5 transition duration-150 ease-in bg-gray-200 rounded-full hover:bg-gray-400 hover:text-gray-50 ">
13
</div>
<div
class="w-12 flex justify-center items-center cursor-pointer leading-5 transition duration-150 ease-in bg-gray-200 rounded-full hover:bg-gray-400 hover:text-gray-50 ">
14
</div>
<div
class="w-12 flex justify-center items-center cursor-pointer leading-5 transition duration-150 ease-in rounded-full bg-gray-800 text-white hover:text-gray-50 hover:bg-gray-700">
15
</div>
<div
class="w-12 flex justify-center items-center cursor-pointer leading-5 transition duration-150 ease-in bg-gray-200 rounded-full hover:bg-gray-400 hover:text-gray-50 ">
16
</div>
<div
class="w-12 flex justify-center items-center cursor-pointer leading-5 transition duration-150 ease-in bg-gray-200 rounded-full hover:bg-gray-400 hover:text-gray-50 ">
17
</div>
<div
class="w-12 h-12 flex justify-center items-center cursor-pointer leading-5 transition duration-150 ease-in bg-gray-200 rounded-full hover:bg-gray-400 hover:text-gray-50 ">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="feather feather-chevron-right w-6 h-6">
<polyline points="9 18 15 12 9 6"></polyline>
</svg>
</div>
</div>
<div class="flex items-center">
<p class="text-gray-800 font-medium text-sm mr-2">Go to:</p>
<form action="">
<input type="text"
class="appearance-none w-24 bg-gray-100 text-gray-700 py-3 px-4 rounded-lg leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
placeholder="e.g. 102">
</form>
</div>
</div>
<div class="flex text-gray-700 justify-end rounded-md p-4 bg-white w-full items-center space-x-16">
<div class="flex items-center">
<div>
<form action="">
<div class="relative">
<select
class="block appearance-none w-full bg-gray-100 text-gray-700 py-3 px-4 pr-8 rounded-lg leading-tight focus:outline-none focus:bg-white focus:border-gray-500">
<option selected>10</option>
<option>20</option>
<option>50</option>
<option>100</option>
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M12 16L6 10H18L12 16Z"></path>
</svg>
</div>
</div>
</form>
</div>
</div>
<div class="flex h-12 text-sm font-medium space-x-3">
<div
class="w-12 h-12 flex justify-center items-center cursor-pointer leading-5 transition duration-150 ease-in bg-gray-200 rounded-full hover:bg-gray-400 hover:text-gray-50 ">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="feather feather-chevron-left w-6 h-6">
<polyline points="15 18 9 12 15 6"></polyline>
</svg>
</div>
<div
class="w-12 flex justify-center items-center cursor-pointer leading-5 transition duration-150 ease-in bg-gray-200 rounded-full hover:bg-gray-400 hover:text-gray-50 ">
1
</div>
<div
class="w-12 flex justify-center items-center cursor-pointer leading-5 transition duration-150 ease-in rounded-full hover:bg-gray-400 hover:text-gray-50 ">
...
</div>
<div
class="w-12 flex justify-center items-center cursor-pointer leading-5 transition duration-150 ease-in bg-gray-200 rounded-full hover:bg-gray-400 hover:text-gray-50 ">
14
</div>
<div
class="w-12 flex justify-center items-center cursor-pointer leading-5 transition duration-150 ease-in rounded-full bg-gray-800 text-white hover:text-gray-50 hover:bg-gray-700">
15
</div>
<div
class="w-12 flex justify-center items-center cursor-pointer leading-5 transition duration-150 ease-in bg-gray-200 rounded-full hover:bg-gray-400 hover:text-gray-50 ">
16
</div>
<div class="relative inline-block items-center text-left">
<div>
<button type="button" class="w-12 h-12 flex justify-center items-center cursor-pointer leading-5 transition duration-150 ease-in rounded-full hover:bg-gray-400 hover:text-gray-50" id="dropdown-toggle">
...
</button>
</div>
<div class="origin-top-right absolute right-0 mt-2 w-12 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 hidden" id="dropdown-menu">
<div class="py-1" role="menu" aria-orientation="vertical" aria-labelledby="dropdown-toggle">
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">17</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">18</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">19</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">20</a>
</div>
</div>
</div>
<div
class="w-12 flex justify-center items-center cursor-pointer leading-5 transition duration-150 ease-in bg-gray-200 rounded-full hover:bg-gray-400 hover:text-gray-50 ">
110
</div>
<div
class="w-12 h-12 flex justify-center items-center cursor-pointer leading-5 transition duration-150 ease-in bg-gray-200 rounded-full hover:bg-gray-400 hover:text-gray-50 ">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="feather feather-chevron-right w-6 h-6">
<polyline points="9 18 15 12 9 6"></polyline>
</svg>
</div>
</div>
<div class="flex items-center">
<p class="text-gray-800 font-medium text-sm mr-2">Go to:</p>
<form action="">
<input type="text"
class="appearance-none w-24 bg-gray-100 text-gray-700 py-3 px-4 rounded-lg leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
placeholder="e.g. 102">
</form>
</div>
</div>
</div>
<script>
const dropdownToggle = document.getElementById('dropdown-toggle');
const dropdownMenu = document.getElementById('dropdown-menu');
dropdownToggle.addEventListener('click', () => {
dropdownMenu.classList.toggle('hidden');
});
// Menutup dropdown saat klik di luar dropdown
window.addEventListener('click', (event) => {
if (!dropdownToggle.contains(event.target) && !dropdownMenu.contains(event.target)) {
dropdownMenu.classList.add('hidden');
}
});
</script>
</div>