Pagination round buttons

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

Pagination

Author Livia Flores

Tailwind v3.4 12.6k 18

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.

Diego Chavez

3 years ago

8.7k
Boutons iOS 26
Boutons iOS 26

Omer fils ELENGA

10 months ago

823
Pagination

Nishant Trivedi

3 years ago

10.2k
TailwindFlex – Creative Animated Home Experience
"Innovative Home with Tailwind Animated Background" "Animated Hero – TailwindFlex Design" "Smooth UI – Creative Motion with Tailwind CSS" "Home Harmony – Motion Meets Design" "TailwindFlex Home – Fluid Animation & UI"

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.7k
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
Simple Pagination

Manuela Bianka

4 years ago

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

Sufyan jutt

11 months ago

966
Content Discovery Platform with Search & Filter
A modern, responsive web application built with Tailwind CSS that showcases content cards with search and filter functionality.

Sufyan jutt

11 months ago

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

Leif99

3 years ago

12.2k
Employee table
Modern Unique and responsive table layout

Rajesh Maheshwari

1 year ago

3.5k
My Coding Journey
To transform a standard timeline into an engaging, scroll-driven narrative experience.

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

791
Clean Pagination

Anonymous

1 year ago

1.9k

Browse by topic

Explore components by Tags

Jump straight to the UI pattern you need.

Footer Header Card Article Avatar FAQ Banner Blog Breadcrumb Button Call to Action Form Carousel Contact us Error page Feature Gallery Hero Input Spinner Login Modal Pagination Pricing Profile

Can't find it?

Didn't find the component you were looking for?

Search across 3,000+ community-built components and grab the code in seconds.