1+ Pagination Components - Tailwind

Welcome to our Tailwind CSS pagination collection! Pagination is like little numbered buttons that help you move between pages on a website, like flipping through a book. They're super handy for when you have lots of content to browse through. In this collection, we've gathered different designs for pagination that you can use on your website. Whether you want something basic or something more eye-catching, we've got examples to help you out. Let's dive in and see how you can make navigating your website a breeze with these easy-to-use pagination components, all thanks to Tailwind CSS!

Simple Pagination

Explore the versatility of Pagination components styled with Tailwind CSS, perfect for organizing and navigating through large sets of content.

Author: Admin

Preview
Code

<div class="flex items-center">
      <button class="w-full p-4 border text-base rounded-l-xl text-gray-600 bg-white hover:bg-gray-100">
          <svg width="9" fill="currentColor" height="8" class="" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
              <path d="M1427 301l-531 531 531 531q19 19 19 45t-19 45l-166 166q-19 19-45 19t-45-19l-742-742q-19-19-19-45t19-45l742-742q19-19 45-19t45 19l166 166q19 19 19 45t-19 45z">
              </path>
          </svg>
      </button>
      <button class="w-full px-4 py-2 border-t border-b text-base text-indigo-500 bg-white hover:bg-gray-100">
          1
      </button>
      <button class="w-full px-4 py-2 border text-base text-gray-600 bg-white hover:bg-gray-100">
          2
      </button>
      <button class="w-full px-4 py-2 border-t border-b text-base text-gray-600 bg-white hover:bg-gray-100">
          3
      </button>
      <button class="w-full px-4 py-2 border text-base text-gray-600 bg-white hover:bg-gray-100">
          4
      </button>
      <button class="w-full p-4 border-t border-b border-r text-base rounded-r-xl text-gray-600 bg-white hover:bg-gray-100">
          <svg width="9" fill="currentColor" height="8" class="" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
              <path d="M1363 877l-742 742q-19 19-45 19t-45-19l-166-166q-19-19-19-45t19-45l531-531-531-531q-19-19-19-45t19-45l166-166q19-19 45-19t45 19l742 742q19 19 19 45t-19 45z">
              </path>
          </svg>
      </button>
  </div>

```
No Custom CSS
```
```
No need of JavaScript
```