Home
Prem..
Pagination

Pagination

This tailwind example is contributed by Prem.., on 18-Jul-2022. Component is made with Tailwind CSS v3. It is responsive.

Pagination

Author Prem..

11.1k

10

Fork Fullscreen

<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>

Related Examples

Pagination with active page indicator

Author:
Leif99

2 years ago

13k
Clean Pagination

Author:
Anonymous

8 months ago

905
Previous page - Next page Buttons

Author:
Krishna Gudpalle

3 years ago

13.1k
Pagination
Pagination with total page and current page.

Author:
Alok

2 years ago

10.6k
SomaRwanda
Menya uburyo bwo kwandika ibisomwa, impuzandimi, n'imyandikire y'icyongereza mu buryo bworoshye.

Author:
Code Master(Mfuranziza Dusabe Hamza)

3 months ago

634
Pagination
This is a simple pagination

Author:
Khalid

1 year ago

2.1k
Basic pagination

Author:
Leon Bachmann

2 years ago

8.3k
Back and next navigation buttons

Author:
Fagundo67

2 years ago

11.6k
Pagination

Author:
Leon Bachmann

2 years ago

10k
Pagination

Author:
Nishant Trivedi

2 years ago

9.7k
Simple rounded pagination
It has a minimalistic look with options to go to the previous and next pages and click on specific page numbers.

Author:
Diego Chavez

1 year ago

7.4k
Pagination

Author:
Lîmåã M

2 years ago

11k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2025 TailwindFlex. All Rights Reserved.

v1.1