Button Pagination V3 - 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...
154 lines
<div class="flex flex-col my-12 py-4 items-center space-y-4 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">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd"
d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
clip-rule="evenodd" />
</svg>
</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">
5
</button>
</li>
<li>
<button class="px-4 py-2 hover:text-blue-600 dark:text-gray-300 dark:hover:text-gray-50">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
clip-rule="evenodd" />
</svg>
</button>
</li>
</ul>
<ul class="inline-flex mx-auto items-center 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">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd"
d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
clip-rule="evenodd" />
</svg>
</button>
</li>
<li>
<button
class=" px-4 py-2 text-gray-700 hover:text-gray-800 rounded dark:bg-gray-600 dark:hover:bg-gray-700">
<select name="" id="">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
</select>
</button>
</li>
<li>
<button class="px-4 py-2 hover:text-blue-600 dark:text-gray-300 dark:hover:text-gray-50">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
clip-rule="evenodd" />
</svg>
</button>
</li>
</ul>
<ul class="inline-flex mx-auto bg-gray-50 space-x-4 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">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd"
d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
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 rotate-45 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">
<p class="-rotate-45">2</p>
</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">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
clip-rule="evenodd" />
</svg>
</button>
</li>
</ul>
<ul class="inline-flex mx-auto bg-gray-50 space-x-4 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">
Go to page
</button>
</li>
<li>
<input type="text" class="py-2 w-10 text-center" value="4">
</li>
<li>
<button
class="px-4 py-2 bg-gray-400 hover:bg-blue-600 hover:text-gray-50 dark:text-gray-100 rounded dark:hover:bg-gray-700">
Go
</button>
</li>
</ul>
<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 text-blue-800 hover:text-blue-600 dark:text-gray-300 dark:hover:text-gray-50">
1
</button>
</li>
<li>
<button class=" px-4 py-2 text-gray-700 hover:bg-blue-600 hover:text-gray-50 rounded">
-
</button>
</li>
<li>
<button class="px-4 py-2 hover:text-blue-600 dark:text-gray-300 dark:hover:text-gray-50">
7
</button>
</li>
<li>
<button class="px-4 py-2 hover:text-blue-600 dark:text-gray-300 dark:hover:text-gray-50">
8
</button>
</li>
<li>
<button class="px-4 py-2 hover:text-blue-600 dark:text-gray-300 dark:hover:text-gray-50">
9
</button>
</li>
</ul>
<ul class="inline-flex mx-auto space-x-4 px-2 py-4 rounded-md shadow-md ">
<li>
<button
class="px-4 py-2 rounded-2xl hover:text-blue-600 dark:text-gray-300 dark:hover:text-gray-50">
10/Pagination
</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>