Home
Livia Flores
Pagination round buttons

Pagination round buttons

This tailwind example is contributed by Livia Flores, on 07-Apr-2023. Component is made with Tailwind CSS v3. It is responsive.

Pagination

Author Livia Flores

12.2k

15

Fork Fullscreen

<div class="flex justify-center">
    <nav class="bg-gray-200 rounded-full px-4 py-2">
        <ul class="flex text-gray-600 gap-4 font-medium py-2">
            <li>
                <a href="#" class="rounded-full px-4 py-2 bg-white text-gray-600">1</a>
            </li>
            <li>
                <a href="#"
                    class="rounded-full px-4 py-2 hover:bg-white hover:text-gray-600 transition duration-300 ease-in-out">2</a>
            </li>
            <li>
                <a href="#"
                    class="rounded-full px-4 py-2 hover:bg-white hover:text-gray-600 transition duration-300 ease-in-out">3</a>
            </li>
            <li>
                <a href="#"
                    class="rounded-full px-4 py-2 hover:bg-white hover:text-gray-600 transition duration-300 ease-in-out">4</a>
            </li>
            <li>
                <a href="#"
                    class="rounded-full px-4 py-2 hover:bg-white hover:text-gray-600 transition duration-300 ease-in-out">5</a>
            </li>
        </ul>
    </nav>
</div>

Related Examples

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

2 years ago

8.1k
Clean Pagination

Author:
Anonymous

1 year ago

1.4k
Simple Pagination

Author:
Gopi Yadav

3 years ago

10.3k
Pagination

Author:
Nishant Trivedi

2 years ago

9.9k
Pagination

Author:
Lîmåã M

2 years ago

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

Author:
Bogdan Galin

2 years ago

8.4k
Responsive pagination with items per page filter
Displays previous and next pagination buttons on mobile devices

Author:
Leif99

3 years ago

11.7k
Engineering Project Dashboard
Track engineering assignments, project progress, technology stack, and delivery timelines in one simple dashboard.

Author:
Ayyamperumal S

1 week ago

75
vscode a la omerlinks
vscode a la omerlinks

Author:
Omer fils ELENGA

3 months ago

304
Pagination

Author:
Leon Bachmann

3 years ago

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

Author:
Abhiraj

1 year ago

1.8k
Pagination
Pagination with total page and current page.

Author:
Alok

3 years ago

11.5k

Explore components by Tags

Didn't find component you were looking for?

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

© 2026 TailwindFlex. All Rights Reserved.

v1.12