Tailwind CSS Simple Pagination
Tags: css, tailwindcss, webdev, tutorial
Published: 2021-07-29 06:54:40

In this tutorial we will see simple pagination, pagination with icon, pagination with border, pagination with active page ,examples with Tailwind CSS

####Tool Use

######Tailwind CSS 2.x
######Heroicons Icons
######Unsplash for image


👉 [View Demo](https://larainfo.com/blogs/tailwind-css-simple-pagination)

Setup Project

Using CDN

```html
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
```
or 

[The Easiest way to install Tailwind CSS with Tailwind CLI](https://larainfo.com/blogs/the-easiest-way-to-install-tailwind-css-with-tailwind-cli)

[How to Install Tailwind CSS with NPM](https://larainfo.com/blogs/how-to-install-tailwind-css-with-npm)

####Example 1
Simple Pagination

```html
<div class="flex items-center space-x-1">
    <a href="#" class="flex items-center px-4 py-2 text-gray-500 bg-gray-300 rounded-md">
        Previous
    </a>

    <a href="#" class="px-4 py-2 text-gray-700 bg-gray-200 rounded-md hover:bg-blue-400 hover:text-white">
        1
    </a>
    <a href="#" class="px-4 py-2 text-gray-700 bg-gray-200 rounded-md hover:bg-blue-400 hover:text-white">
        2
    </a>
    <a href="#" class="px-4 py-2 text-gray-700 bg-gray-200 rounded-md hover:bg-blue-400 hover:text-white">
        3
    </a>
    <a href="#" class="px-4 py-2 font-bold text-gray-500 bg-gray-300 rounded-md hover:bg-blue-400 hover:text-white">
        Next
    </a>
</div>
```
![tailwind css pagination](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a9abxpasjbbf7h8d71i4.png)


####Example 2
Pagination with Icon
```html
<div class="flex items-center space-x-1">
    <a href="#" class="flex items-center px-4 py-2 text-gray-500 bg-gray-300 rounded-md">
        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 17l-5-5m0 0l5-5m-5 5h12" />
        </svg>
    </a>

    <a href="#" class="px-4 py-2 text-gray-700 bg-gray-200 rounded-md hover:bg-blue-400 hover:text-white">
        1
    </a>
    <a href="#" class="px-4 py-2 text-gray-700 bg-gray-200 rounded-md hover:bg-blue-400 hover:text-white">
        2
    </a>
    <a href="#" class="px-4 py-2 text-gray-700 bg-gray-200 rounded-md hover:bg-blue-400 hover:text-white">
        3
    </a>
    <a href="#" class="px-4 py-2 text-gray-500 bg-gray-300 rounded-md hover:bg-blue-400 hover:text-white">
        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
        </svg>
    </a>
</div>
```
![pagination with arrow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k3ui2vrldsvttmtus5mo.png)

####Example 3
Pagination with border and active page
```html
<div class="container flex justify-center mx-auto">
    <ul class="flex">
        <li><button
                class="h-10 px-5 text-gray-600 bg-white border border-r-0 border-gray-600 hover:bg-gray-100">Prev</button>
        </li>
        <li><button class="h-10 px-5 text-gray-600 bg-white border border-r-0 border-gray-600 ">1</button>
        </li>
        <li><button
                class="h-10 px-5 text-gray-600 bg-white border border-r-0 border-gray-600 hover:bg-gray-100">2</button>
        </li>
        <li><button class="h-10 px-5 text-white bg-gray-600 border border-r-0 border-gray-600 ">3</button>
        </li>
        <li><button class="h-10 px-5 text-gray-600 bg-white border border-gray-600 hover:bg-gray-100">Next</button>
        </li>
    </ul>
</div>
```
![tailwind css pagination](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/22ml072ahey0ncmljfr1.png)

###See Also 👇
[Tailwind CSS Simple Table Example](https://larainfo.com/blogs/tailwind-css-simple-table-example)
[Tailwind CSS Simple Button Examples](https://larainfo.com/blogs/tailwind-css-simple-button-examples)
[Tailwind CSS Simple Responsive Image Gallery with Grid](https://larainfo.com/blogs/tailwind-css-simple-responsive-image-gallery-with-grid)
[Tailwind CSS Simple Alert Components Examples](https://larainfo.com/blogs/tailwind-css-simple-alert-components-examples)
[Tailwind CSS Simple Card Examples](https://larainfo.com/blogs/tailwind-css-simple-card-examples)
[Tailwind CSS Badge Examples](https://larainfo.com/blogs/tailwind-css-badge-examples)
[Tailwind CSS Simple Modals Examples](https://larainfo.com/blogs/tailwind-css-simple-modals-examples)
[Tailwind CSS Simple Avatar Examples](https://larainfo.com/blogs/tailwind-css-simple-avatar-examples)