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

10.8k

7

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

12.3k
Pagination

Author:
Sienna

2 years ago

10.2k
Previous Next Buttons
Pagination buttons

Author:
Alok

2 years ago

13.3k
Basic pagination

Author:
Freja Jensen

2 years ago

12.4k
Pagination

Author:
Nishant Trivedi

1 year ago

9.4k
Basic pagination

Author:
Sophia Baker

2 years ago

11.4k
Back and next navigation buttons

Author:
Fagundo67

2 years ago

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

6.9k
Simple pagination

Author:
Elijah Davis

2 years ago

8.3k
Pagination

Author:
Leon Bachmann

2 years ago

9.6k
Pagination round buttons

Author:
Livia Flores

2 years ago

11.1k
Simple Pagination

Author:
Manuela Bianka

2 years ago

11k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ 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