Basic pagination

This tailwind example is contributed by Freja Jensen, on 11-Jan-2023. Component is made with Tailwind v3.4. It is responsive.

Pagination

Author Freja Jensen

Tailwind v3.4 13.5k 15

Fork Fullscreen

<nav class="mt-12 flex items-center justify-between border-t border-gray-200 px-4 pt-12 sm:px-6"
    aria-label="Pagination">
    <div class="flex flex-1 justify-between">
        <a class="relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
            rel="prev" href="/"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512"
                height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
                <path
                    d="M257.5 445.1l-22.2 22.2c-9.4 9.4-24.6 9.4-33.9 0L7 273c-9.4-9.4-9.4-24.6 0-33.9L201.4 44.7c9.4-9.4 24.6-9.4 33.9 0l22.2 22.2c9.5 9.5 9.3 25-.4 34.3L136.6 216H424c13.3 0 24 10.7 24 24v32c0 13.3-10.7 24-24 24H136.6l120.5 114.8c9.8 9.3 10 24.8.4 34.3z">
                </path>
            </svg> &nbsp; Previous
        </a>
        <a class="relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
            rel="prev" href="/"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 576 512"
                height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
                <path
                    d="M280.37 148.26L96 300.11V464a16 16 0 0 0 16 16l112.06-.29a16 16 0 0 0 15.92-16V368a16 16 0 0 1 16-16h64a16 16 0 0 1 16 16v95.64a16 16 0 0 0 16 16.05L464 480a16 16 0 0 0 16-16V300L295.67 148.26a12.19 12.19 0 0 0-15.3 0zM571.6 251.47L488 182.56V44.05a12 12 0 0 0-12-12h-56a12 12 0 0 0-12 12v72.61L318.47 43a48 48 0 0 0-61 0L4.34 251.47a12 12 0 0 0-1.6 16.9l25.5 31A12 12 0 0 0 45.15 301l235.22-193.74a12.19 12.19 0 0 1 15.3 0L530.9 301a12 12 0 0 0 16.9-1.6l25.5-31a12 12 0 0 0-1.7-16.93z">
                </path>
            </svg> &nbsp; Home
        </a>
        <a class="relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
            rel="next">Next Page &nbsp; <svg stroke="currentColor" fill="currentColor" stroke-width="0"
                viewBox="0 0 448 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
                <path
                    d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z">
                </path>
            </svg>
        </a>
    </div>
</nav>

Related Examples

Previous page - Next page Buttons

Krishna Gudpalle

4 years ago

14.3k
Pagination round buttons

Livia Flores

3 years ago

12.6k
Pagination with hover effect
Simple Pagination. If you have a website with lots of pages, you may wish to add some sort of pagination to each page for better navigation

Bogdan Galin

3 years ago

8.9k
chat ui advanced
Professional chat ui, connect me for jsx https://abhirajk.vercel.app/

Abhiraj

1 year ago

2.5k
Pagination
It's my first project which i made him in the using tailwind css and html

Sufyan jutt

11 months ago

966
Pagination with hover effect
Simple Pagination. If you have a website with lots of pages, you may wish to add some sort of pagination to each page for better navigation

Amit Pachange

4 years ago

9.7k
Pagination
Pagination with total page and current page.

Alok

4 years ago

12.1k
Responsive Pagination Component with Tailwind CSS
This is a sleek and responsive pagination component built with Tailwind CSS. It features previous and next buttons, numbered pages, and an ellipsis (...) for better navigation when handling large sets of pages. The active page is highlighted with a bold border and color, while the disabled state is styled for clarity. The design is clean, minimal, and fully responsive, making it suitable for modern web applications.

SHARIFUL ISLAM

1 year ago

2k
Pagination - Htmlwind
Centered numbers pagination

Htmlwind

1 year ago

1.2k
ACODE,ASTER
love my projuct

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.4k
Simple pagination

Elijah Davis

3 years ago

9.7k
Pagination
This is a simple pagination

Khalid

2 years ago

3k