Tailwind CSS Pagination

Get started on your web projects with our Tailwind CSS pagination which is a compact elements that represent an input, attribute, or action. This element appears dynamically as a group of multiple interactive elements and allows users to enter information, make selections, filter content, or trigger actions.

See below our simple pagination component example that you can use for your Tailwind CSS project.


<nav>
  <ul class="pagination-pink pagination">
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Previous">
        <span class="material-icons">keyboard_arrow_left</span>
      </a>
    </li>
    <li class="page-item active">
      <a class="page-link" href="#">1</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#">2</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Next">
        <span class="material-icons">keyboard_arrow_right</span>
      </a>
    </li>
  </ul>
</nav>


Pagination Colors Variation

Use this example to create a simple and versatile pagination component.

Change the color of the pagination component by simply add the name of the color (from the list below) after the .pagination class.


<nav>
  <ul className="pagination pagination-cyan">
    <li className="page-item">
      <a className="page-link" href="#" aria-label="Previous">
        <span className="material-icons">keyboard_arrow_left</span>
      </a>
    </li>
    <li className="page-item active">
      <a className="page-link" href="#">1</a>
    </li>
    <li className="page-item"><a className="page-link" href="#">2</a></li>
    <li className="page-item"><a className="page-link" href="#">3</a></li>
    <li className="page-item">
      <a className="page-link" href="#" aria-label="Next">
        <span className="material-icons">keyboard_arrow_right</span>
      </a>
    </li>
  </ul>
</nav>
colors: {
  ("blue-grey");
  ("grey");
  ("brown");
  ("deep-orange");
  ("orange");
  ("amber");
  ("yellow");
  ("lime");
  ("light-green");
  ("green");
  ("teal");
  ("cyan");
  ("light-blue");
  ("blue");
  ("indigo");
  ("deep-purple");
  ("purple");
  ("pink");
  ("red");
  ("secondary");
  ("light");
  ("dark");
}


Pagination with gradient

All you have to do is to set the .pagination-gradient class.


<nav>
  <ul class="pagination-pink pagination pagination-gradient">
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Previous">
        <span class="material-icons">keyboard_arrow_left</span>
      </a>
    </li>
    <li class="page-item active"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Next">
        <span class="material-icons">keyboard_arrow_right</span>
      </a>
    </li>
  </ul>
</nav>
Edit this page on Github