Button Pagination - 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...
113 lines
<div class="flex flex-col my-12 py-4 items-center space-y-5 dark:bg-gray-800">
<ul class="inline-flex mx-auto bg-gray-50 space-x-2 px-2 py-4 rounded-md shadow-md dark:bg-gray-500">
<li>
<button class="px-4 py-2 hover:text-blue-600 dark:text-gray-300 dark:hover:text-gray-50">
Prev
</button>
</li>
<li>
<button class="px-4 py-2 hover:bg-blue-600 hover:text-gray-50 dark:text-gray-100 rounded dark:hover:bg-gray-700">
1
</button>
</li>
<li>
<button
class="bg-blue-400 px-4 py-2 text-gray-100 hover:bg-blue-600 hover:text-gray-50 rounded dark:bg-gray-600 dark:hover:bg-gray-700">
2
</button>
</li>
<li>
<button class="px-4 py-2 hover:bg-blue-600 hover:text-gray-50 dark:text-gray-100 rounded dark:hover:bg-gray-700">
3
</button>
</li>
<li>
<button class="px-4 py-2 hover:text-blue-600 dark:text-gray-300 dark:hover:text-gray-50">
Next
</button>
</li>
</ul>
<ul class="inline-flex mx-auto items-center space-x-2 bg-gray-50 px-2 py-4 rounded-md shadow-md dark:bg-gray-500">
<li>
<button class="px-5 py-2 items-center">
<svg xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 text-gray-600 hover:text-blue-600 dark:text-gray-300 dark:hover:text-gray-50"
viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd"
d="M15.707 15.707a1 1 0 01-1.414 0l-5-5a1 1 0 010-1.414l5-5a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 010 1.414zm-6 0a1 1 0 01-1.414 0l-5-5a1 1 0 010-1.414l5-5a1 1 0 011.414 1.414L5.414 10l4.293 4.293a1 1 0 010 1.414z"
clip-rule="evenodd" />
</svg>
</button>
</li>
<li>
<button class="px-4 py-2 hover:bg-blue-600 hover:text-gray-50 dark:text-gray-100 rounded dark:hover:bg-gray-700">
1
</button>
</li>
<li>
<button
class="bg-blue-400 px-4 py-2 text-gray-100 hover:bg-blue-600 hover:text-gray-50 rounded dark:bg-gray-600 dark:hover:bg-gray-700">
2
</button>
</li>
<li>
<button class="px-4 py-2 hover:bg-blue-600 hover:text-gray-50 dark:text-gray-100 rounded dark:hover:bg-gray-700">
3
</button>
</li>
<li>
<button class="px-5 py-2 items-center">
<svg xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 text-gray-600 hover:text-blue-600 dark:text-gray-300 dark:hover:text-gray-50"
viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd"
d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z"
clip-rule="evenodd" />
<path fill-rule="evenodd"
d="M4.293 15.707a1 1 0 010-1.414L8.586 10 4.293 5.707a1 1 0 011.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z"
clip-rule="evenodd" />
</svg>
</button>
</li>
</ul>
<ul class="inline-flex mx-auto bg-gray-50 px-2 py-4 space-x-2 rounded-md shadow-md dark:bg-gray-500">
<li>
<button
class="px-3 py-2 hover:bg-blue-600 hover:text-gray-50 border border-blue-400 rounded dark:text-gray-300 dark:border-gray-300 dark:hover:bg-gray-700">
Prev
</button>
</li>
<li>
<button
class="px-4 py-2 hover:bg-blue-600 hover:text-gray-50 dark:text-gray-100 rounded border border-blue-400 dark:border-gray-300 dark:hover:bg-gray-700">
1
</button>
</li>
<li>
<button
class="bg-blue-400 px-4 py-2 text-gray-100 hover:bg-blue-600 hover:text-gray-50 rounded border border-blue-400 dark:bg-gray-700 dark:border-gray-300 dark:hover:bg-gray-800">
2
</button>
</li>
<li>
<button
class="px-4 py-2 hover:bg-blue-600 hover:text-gray-50 dark:text-gray-100 rounded border border-blue-400 dark:border-gray-300 dark:hover:bg-gray-700">
3
</button>
</li>
<li>
<button
class="px-3 py-2 hover:bg-blue-600 hover:text-gray-50 border border-blue-400 rounded dark:text-gray-300 dark:border-gray-300 dark:hover:bg-gray-700">
Next
</button>
</li>
</ul>
</div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');
body {
font-family: 'Poppins', sans-serif;
}
</style>