Button Pagination V2 - Tailwind Component
If you have a web site with lots of pages, you may wish to add some sort of pagination to each page, it is use Tailwind CSS to create this beautiful pagination tailwind component.
pagination
Loading component...
194 lines
<div class="flex flex-col items-center my-12">
<div class="flex text-gray-700">
<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 h-12 font-medium rounded-full bg-gray-200">
<div
class="w-12 sm:flex justify-center items-center hidden cursor-pointer leading-5 transition duration-150 ease-in hover:bg-gray-300 rounded-full ">
1
</div>
<div
class="w-12 sm:flex justify-center items-center hidden cursor-pointer leading-5 transition duration-150 ease-in hover:bg-gray-300 rounded-full ">
2
</div>
<div
class="w-12 flex justify-center items-center cursor-pointer leading-5 transition duration-150 ease-in hover:bg-gray-700 rounded-full bg-gray-800 text-white ">
3
</div>
<div
class="w-12 sm:flex justify-center items-center hidden cursor-pointer leading-5 transition duration-150 ease-in hover:bg-gray-300 rounded-full ">
4
</div>
<div
class="w-12 sm:flex justify-center items-center hidden cursor-pointer leading-5 transition duration-150 ease-in hover:bg-gray-300 rounded-full ">
5
</div>
</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>
<div class="flex flex-col items-center my-12">
<div class="flex text-gray-700">
<div class="flex h-12 font-medium rounded-full space-x-3">
<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">
1
</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 ">
2
</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 ">
3
</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 ">
...
</div>
</div>
<div
class="h-12 w-12 ml-2 flex justify-center items-center rounded-full bg-gray-200 cursor-pointer 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>
<div class="flex flex-col items-center my-12">
<div class="flex text-gray-700">
<div class="flex h-12 font-medium rounded-full space-x-3">
<div
class="w-12 flex justify-center items-center cursor-pointer leading-5 transition duration-150 ease-in bg-gray-800 rounded-full text-white hover:text-gray-50 hover:bg-gray-700">
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-600 hover:text-gray-50 ">
2
</div>
<div
class="w-12 flex justify-center items-center cursor-pointer leading-5 transition duration-150 ease-in rounded-full hover:bg-gray-600 hover:text-gray-50 ">
3
</div>
<div
class="w-12 flex justify-center items-center cursor-pointer leading-5 transition duration-150 ease-in rounded-full hover:bg-gray-600 hover:text-gray-50 ">
4
</div>
</div>
<div
class="h-12 w-12 ml-2 flex justify-center items-center rounded-full cursor-pointer hover:bg-gray-600 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>
<div class="flex flex-col items-center my-12">
<div class="flex text-gray-700">
<div
class="h-12 w-12 mr-2 flex justify-center items-center rounded-full hover:bg-gray-400 hover:text-gray-50 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 h-12 font-medium rounded-full space-x-3">
<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 ">
1
</div>
<div
class="w-12 flex justify-center items-center cursor-pointer leading-5 transition duration-150 ease-in rounded bg-gray-800 text-white hover:text-gray-50 hover:bg-gray-700">
2
</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 ">
3
</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 ">
4
</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 ">
5
</div>
</div>
<div
class="h-12 w-12 ml-2 flex justify-center items-center rounded-full cursor-pointer 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>
<div class="flex flex-col items-center my-12">
<div class="flex text-gray-700">
<div
class="h-12 w-12 mr-2 flex justify-center items-center rounded-full bg-gray-200 hover:bg-gray-400 hover:text-gray-50 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 h-12 font-medium rounded-full space-x-3">
<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 bg-gray-800 text-white hover:text-gray-50 hover:bg-gray-700">
2
</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 ">
3
</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 ">
4
</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 ">
...
</div>
</div>
<div
class="h-12 w-12 ml-2 flex justify-center items-center rounded-full bg-gray-200 cursor-pointer 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>
<style>
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');
body {
font-family: 'Space Mono', monospace;
}
</style>