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

11.1k

13

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

1 year ago

6.9k
Clean Pagination

Author:
Anonymous

3 months ago

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

Author:
Abhiraj

2 months ago

741
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

1 year ago

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

Author:
SHARIFUL ISLAM

2 months ago

173
Pagination

Author:
Nishant Trivedi

1 year ago

9.2k
Pagination

Author:
Sienna

2 years ago

10.2k
Pagination

Author:
Anonymous

6 months ago

1k
Basic pagination

Author:
Freja Jensen

2 years ago

12.4k
Simple Pagination

Author:
Manuela Bianka

2 years ago

10.8k
Pagination small
Suitable for large no of pages

Author:
Prajwal Hallale

2 years ago

7.5k
Back and next navigation buttons

Author:
Fagundo67

2 years ago

10.6k

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