Published on

Here Are 6 Ways To Build A Pagination Example With Tailwind CSS

Pagination example

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that provides a set of pre-defined classes to create custom designs quickly. It allows developers to build responsive and complex layouts with ease. Tailwind CSS is gaining popularity among developers because of its simplicity and flexibility.

The description of Pagination example ui component

Pagination is a common UI component used in web applications to break down a large set of data into smaller, more manageable chunks. It allows users to navigate through the data by clicking on page numbers or previous/next buttons. Pagination is an essential component for any website that displays a large amount of data.

Why use Tailwind CSS to create a Pagination example ui component?

Tailwind CSS provides a set of pre-defined classes that make it easy to create a Pagination UI component. It allows developers to focus on the functionality of the component rather than spending time on designing it. Tailwind CSS also provides responsive classes that make it easy to create a responsive Pagination component that works on all devices.

The preview of Pagination example ui component

Here is a preview of the Pagination UI component we will create using Tailwind CSS.

Free download of the Pagination example's source code

The source code of Pagination example ui component

Here is the source code of the Pagination UI component we will create using Tailwind CSS.

<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 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 md:flex justify-center items-center hidden  cursor-pointer leading-5 transition duration-150 ease-in  rounded-full  ">1</div>
            <div class="w-12 md:flex justify-center items-center hidden  cursor-pointer leading-5 transition duration-150 ease-in  rounded-full bg-teal-600 text-white ">2</div>
            <div class="w-12 md:flex justify-center items-center hidden  cursor-pointer leading-5 transition duration-150 ease-in  rounded-full  ">3</div>
            <div class="w-12 md:flex justify-center items-center hidden  cursor-pointer leading-5 transition duration-150 ease-in  rounded-full  ">...</div>
            <div class="w-12 md:flex justify-center items-center hidden  cursor-pointer leading-5 transition duration-150 ease-in  rounded-full  ">13</div>
            <div class="w-12 md:flex justify-center items-center hidden  cursor-pointer leading-5 transition duration-150 ease-in  rounded-full  ">14</div>
            <div class="w-12 md:flex justify-center items-center hidden  cursor-pointer leading-5 transition duration-150 ease-in  rounded-full  ">15</div>
            <div class="w-12 h-12 md:hidden flex justify-center items-center cursor-pointer leading-5 transition duration-150 ease-in rounded-full bg-teal-600 text-white">2</div>
        </div>
        <div class="h-12 w-12 ml-1 flex justify-center items-center rounded-full bg-gray-200 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="h-12 w-12 mr-1 flex justify-center items-center rounded-full bg-gray-200 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 md:flex justify-center items-center hidden  cursor-pointer leading-5 transition duration-150 ease-in  rounded-full  ">1</div>
            <div class="w-12 md:flex justify-center items-center hidden  cursor-pointer leading-5 transition duration-150 ease-in  rounded-full  ">...</div>
            <div class="w-12 md:flex justify-center items-center hidden  cursor-pointer leading-5 transition duration-150 ease-in  rounded-full  ">2</div>
            <div class="w-12 md:flex justify-center items-center hidden  cursor-pointer leading-5 transition duration-150 ease-in  rounded-full bg-teal-600 text-white ">3</div>
            <div class="w-12 md:flex justify-center items-center hidden  cursor-pointer leading-5 transition duration-150 ease-in  rounded-full  ">4</div>
            <div class="w-12 md:flex justify-center items-center hidden  cursor-pointer leading-5 transition duration-150 ease-in  rounded-full  ">...</div>
            <div class="w-12 md:flex justify-center items-center hidden  cursor-pointer leading-5 transition duration-150 ease-in  rounded-full  ">15</div>
            <div class="w-12 h-12 md:hidden flex justify-center items-center cursor-pointer leading-5 transition duration-150 ease-in rounded-full bg-teal-600 text-white">3</div>
        </div>
        <div class="h-12 w-12 ml-1 flex justify-center items-center rounded-full bg-gray-200 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="text-2xl text-center">Small</div>

<div class="flex flex-col items-center my-12">
    <div class="flex text-gray-700">
        <div class="h-8 w-8 mr-1 flex justify-center items-center rounded-full bg-gray-200 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-4 h-4">
                <polyline points="15 18 9 12 15 6"></polyline>
            </svg>
        </div>
        <div class="flex h-8 font-medium rounded-full bg-gray-200">
            <div class="w-8 md:flex justify-center items-center hidden  cursor-pointer leading-5 transition duration-150 ease-in  rounded-full  ">1</div>
            <div class="w-8 md:flex justify-center items-center hidden  cursor-pointer leading-5 transition duration-150 ease-in  rounded-full  ">...</div>
            <div class="w-8 md:flex justify-center items-center hidden  cursor-pointer leading-5 transition duration-150 ease-in  rounded-full  ">3</div>
            <div class="w-8 md:flex justify-center items-center hidden  cursor-pointer leading-5 transition duration-150 ease-in  rounded-full bg-pink-600 text-white ">4</div>
            <div class="w-8 md:flex justify-center items-center hidden  cursor-pointer leading-5 transition duration-150 ease-in  rounded-full  ">5</div>
            <div class="w-8 md:flex justify-center items-center hidden  cursor-pointer leading-5 transition duration-150 ease-in  rounded-full  ">...</div>
            <div class="w-8 md:flex justify-center items-center hidden  cursor-pointer leading-5 transition duration-150 ease-in  rounded-full  ">15</div>
            <div class="w-8 h-8 md:hidden flex justify-center items-center cursor-pointer leading-5 transition duration-150 ease-in rounded-full bg-pink-600 text-white">4</div>
        </div>
        <div class="h-8 w-8 ml-1 flex justify-center items-center rounded-full bg-gray-200 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-4 h-4">
                <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-8 w-8 mr-1 flex justify-center items-center  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-4 h-4">
                <polyline points="15 18 9 12 15 6"></polyline>
            </svg>
        </div>
        <div class="flex h-8 font-medium ">
            <div class="w-8 md:flex justify-center items-center hidden  cursor-pointer leading-5 transition duration-150 ease-in  border-t-2 border-transparent">1</div>
            <div class="w-8 md:flex justify-center items-center hidden  cursor-pointer leading-5 transition duration-150 ease-in  border-t-2 border-orange-600  ">2</div>
            <div class="w-8 md:flex justify-center items-center hidden  cursor-pointer leading-5 transition duration-150 ease-in  border-t-2 border-transparent">3</div>
            <div class="w-8 md:flex justify-center items-center hidden  cursor-pointer leading-5 transition duration-150 ease-in  border-t-2 border-transparent">...</div>
            <div class="w-8 md:flex justify-center items-center hidden  cursor-pointer leading-5 transition duration-150 ease-in  border-t-2 border-transparent">13</div>
            <div class="w-8 md:flex justify-center items-center hidden  cursor-pointer leading-5 transition duration-150 ease-in  border-t-2 border-transparent">14</div>
            <div class="w-8 md:flex justify-center items-center hidden  cursor-pointer leading-5 transition duration-150 ease-in  border-t-2 border-transparent">15</div>
            <div class="w-8 h-8 md:hidden flex justify-center items-center cursor-pointer leading-5 transition duration-150 ease-in border-t-2 border-orange-600">2</div>
        </div>
        <div class="h-8 w-8 ml-1 flex justify-center items-center  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-4 h-4">
                <polyline points="9 18 15 12 9 6"></polyline>
            </svg>
        </div>
    </div>
</div>

How to create a Pagination example with Tailwind CSS?

In this section, we will discuss six different ways to create a Pagination UI component using Tailwind CSS. We will start with the simplest implementation and gradually add more features to it.

1. Basic Pagination

The first implementation is the most basic Pagination component. It consists of a set of page numbers that allow users to navigate through the data. Here is the HTML and CSS code for the basic Pagination component.

<div class="flex justify-center">
  <ul class="flex">
    <li class="mr-1">
      <a href="#" class="px-3 py-2 bg-gray-200 text-gray-700 rounded-lg">1</a>
    </li>
    <li class="mr-1">
      <a href="#" class="px-3 py-2 hover:bg-gray-200 rounded-lg">2</a>
    </li>
    <li class="mr-1">
      <a href="#" class="px-3 py-2 hover:bg-gray-200 rounded-lg">3</a>
    </li>
    <li class="mr-1">
      <a href="#" class="px-3 py-2 hover:bg-gray-200 rounded-lg">4</a>
    </li>
    <li class="mr-1">
      <a href="#" class="px-3 py-2 hover:bg-gray-200 rounded-lg">5</a>
    </li>
  </ul>
</div>

In the above code, we have used the flex and justify-center classes to center the Pagination component. The ul element contains a set of li elements, each containing a page number link. We have used the mr-1 class to add margin to each page number link. The first page number link is styled differently using the bg-gray-200 and text-gray-700 classes.

2. Active Page

In the second implementation, we will add a class to the active page number link. This will help users identify the current page they are on. Here is the updated HTML and CSS code for the Pagination component.

<div class="flex justify-center">
  <ul class="flex">
    <li class="mr-1">
      <a href="#" class="px-3 py-2 bg-gray-200 text-gray-700 rounded-lg">1</a>
    </li>
    <li class="mr-1">
      <a href="#" class="px-3 py-2 hover:bg-gray-200 rounded-lg">2</a>
    </li>
    <li class="mr-1">
      <a href="#" class="px-3 py-2 hover:bg-gray-200 rounded-lg bg-gray-200 text-gray-700">3</a>
    </li>
    <li class="mr-1">
      <a href="#" class="px-3 py-2 hover:bg-gray-200 rounded-lg">4</a>
    </li>
    <li class="mr-1">
      <a href="#" class="px-3 py-2 hover:bg-gray-200 rounded-lg">5</a>
    </li>
  </ul>
</div>

In the above code, we have added the bg-gray-200 and text-gray-700 classes to the active page number link. This will make it stand out from the other page number links.

3. Previous/Next Buttons

In the third implementation, we will add previous and next buttons to the Pagination component. This will allow users to navigate through the data more easily. Here is the updated HTML and CSS code for the Pagination component.

<div class="flex justify-center">
  <ul class="flex">
    <li class="mr-1">
      <a href="#" class="px-3 py-2 bg-gray-200 text-gray-700 rounded-lg">Previous</a>
    </li>
    <li class="mr-1">
      <a href="#" class="px-3 py-2 hover:bg-gray-200 rounded-lg">1</a>
    </li>
    <li class="mr-1">
      <a href="#" class="px-3 py-2 hover:bg-gray-200 rounded-lg bg-gray-200 text-gray-700">2</a>
    </li>
    <li class="mr-1">
      <a href="#" class="px-3 py-2 hover:bg-gray-200 rounded-lg">3</a>
    </li>
    <li class="mr-1">
      <a href="#" class="px-3 py-2 hover:bg-gray-200 rounded-lg">4</a>
    </li>
    <li class="mr-1">
      <a href="#" class="px-3 py-2 hover:bg-gray-200 rounded-lg">5</a>
    </li>
    <li class="mr-1">
      <a href="#" class="px-3 py-2 bg-gray-200 text-gray-700 rounded-lg">Next</a>
    </li>
  </ul>
</div>

In the above code, we have added two new page number links for the previous and next buttons. We have also used the bg-gray-200 and text-gray-700 classes to style these buttons.

4. Disabled Buttons

In the fourth implementation, we will disable the previous button on the first page and the next button on the last page. This will prevent users from clicking on these buttons when they are not needed. Here is the updated HTML and CSS code for the Pagination component.

<div class="flex justify-center">
  <ul class="flex">
    <li class="mr-1">
      <a href="#" class="px-3 py-2 bg-gray-200 text-gray-700 rounded-lg cursor-not-allowed">Previous</a>
    </li>
    <li class="mr-1">
      <a href="#" class="px-3 py-2 hover:bg-gray-200 rounded-lg bg-gray-200 text-gray-700">1</a>
    </li>
    <li class="mr-1">
      <a href="#" class="px-3 py-2 hover:bg-gray-200 rounded-lg">2</a>
    </li>
    <li class="mr-1">
      <a href="#" class="px-3 py-2 hover:bg-gray-200 rounded-lg">3</a>
    </li>
    <li class="mr-1">
      <a href="#" class="px-3 py-2 hover:bg-gray-200 rounded-lg">4</a>
    </li>
    <li class="mr-1">
      <a href="#" class="px-3 py-2 hover:bg-gray-200 rounded-lg bg-gray-200 text-gray-700">5</a>
    </li>
    <li class="mr-1">
      <a href="#" class="px-3 py-2 bg-gray-200 text-gray-700 rounded-lg cursor-not-allowed">Next</a>
    </li>
  </ul>
</div>

In the above code, we have added the cursor-not-allowed class to the disabled buttons. This will change the cursor to a not-allowed cursor when the user hovers over the button.

5. Responsive Pagination

In the fifth implementation, we will make the Pagination component responsive. This will ensure that the component works on all devices and screen sizes. Here is the updated HTML and CSS code for the responsive Pagination component.

<div class="flex justify-center">
  <ul class="flex">
    <li class="mr-1">
      <a href="#" class="px-3 py-2 bg-gray-200 text-gray-700 rounded-lg cursor-not-allowed">Previous</a>
    </li>
    <li class="mr-1">
      <a href="#" class="px-3 py-2 hover:bg-gray-200 rounded-lg bg-gray-200 text-gray-700">1</a>
    </li>
    <li class="mr-1">
      <a href="#" class="px-3 py-2 hover:bg-gray-200 rounded-lg">2</a>
    </li>
    <li class="mr-1">
      <a href="#" class="px-3 py-2 hover:bg-gray-200 rounded-lg">3</a>
    </li>
    <li class="mr-1">
      <a href="#" class="px-3 py-2 hover:bg-gray-200 rounded-lg">4</a>
    </li>
    <li class="mr-1">
      <a href="#" class="px-3 py-2 hover:bg-gray-200 rounded-lg bg-gray-200 text-gray-700">5</a>
    </li>
    <li class="mr-1">
      <a href="#" class="px-3 py-2 bg-gray-200 text-gray-700 rounded-lg cursor-not-allowed">Next</a>
    </li>
  </ul>
</div>

@media (max-width: 640px) {
  .flex {
    flex-wrap: wrap;
  }
  .mr-1 {
    margin-right: 0;
    margin-bottom: 0.5rem;
  }
}

In the above code, we have added a media query to make the Pagination component responsive. We have used the flex-wrap property to wrap the page number links to the next line on smaller screens. We have also added the margin-bottom property to the mr-1 class to add some space between the page number links on smaller screens.

6. Custom Pagination

In the sixth implementation, we will create a custom Pagination component with different styles and colors. This will showcase the flexibility of Tailwind CSS. Here is the updated HTML and CSS code for the custom Pagination component.

<div class="flex justify-center">
  <ul class="flex">
    <li class="mr-1">
      <a href="#" class="px-3 py-2 bg-blue-500 text-white rounded-lg cursor-not-allowed">Previous</a>
    </li>
    <li class="mr-1">
      <a href="#" class="px-3 py-2 hover:bg-blue-500 hover:text-white rounded-lg text-blue-500">1</a>
    </li>
    <li class="mr-1">
      <a href="#" class="px-3 py-2 hover:bg-blue-500 hover:text-white rounded-lg text-blue-500">2</a>
    </li>
    <li class="mr-1">
      <a href="#" class="px-3 py-2 hover:bg-blue-500 hover:text-white rounded-lg text-blue-500">3</a>
    </li>
    <li class="mr-1">
      <a href="#" class="px-3 py-2 hover:bg-blue-500 hover:text-white rounded-lg text-blue-500">4</a>
    </li>
    <li class="mr-1">
      <a href="#" class="px-3 py-2 hover:bg-blue-500 hover:text-white rounded-lg text-blue-500">5</a>
    </li>
    <li class="mr-1">
      <a href="#" class="px-3 py-2 bg-blue-500 text-white rounded-lg cursor-not-allowed">Next</a>
    </li>
  </ul>
</div>

@media (max-width: 640px) {
  .flex {
    flex-wrap: wrap;
  }
  .mr-1 {
    margin-right: 0;
    margin-bottom: 0.5rem;
  }
}

In the above code, we have used different colors and styles for the Pagination component. We have used the bg-blue-500 and text-white classes to style the active page number link and the previous/next buttons. We have also used the hover:bg-blue-500 and hover:text-white classes to add hover effects to the page number links.

Conclusion

In this article, we have discussed six different ways to create a Pagination UI component using Tailwind CSS. We started with the most basic implementation and gradually added more features to it. We also made the Pagination component responsive and created a custom version with different styles and colors. Tailwind CSS provides a set of pre-defined classes that make it easy to create custom UI components quickly.