Pagination

This tailwind example is contributed by Leon Bachmann, on 07-Dec-2022. Component is made with Tailwind v3.4. It is responsive.

Pagination

Author Leon Bachmann

Tailwind v3.4 11.6k 12

Fork Fullscreen

<div class="flex justify-center mt-10 space-x-2">
    <a href="#"
        class="ring ring-primary bg-primary/20 px-2 py-1 sm:px-4 sm:py-2 ml-1 mt-2 text-gray-600 border rounded-lg focus:outline-none">1
    </a>
    <a href="#"
        class="hover:bg-gray-100 px-2 py-1 sm:px-4 sm:py-2 ml-1 mt-2 text-gray-600 border rounded-lg focus:outline-none">2
    </a>
    <a href="#"
        class="hover:bg-gray-100 px-2 py-1 sm:px-4 sm:py-2 ml-1 mt-2 text-gray-600 border rounded-lg focus:outline-none">3
    </a>
    <span
        class="px-2 py-1 sm:px-4 sm:py-2 mt-2 text-gray-600 rounded-lg focus:outline-none">...</span>
    <a href="#"
        class="px-2 py-1 sm:px-4 sm:py-2 mt-2 text-gray-600 border rounded-lg hover:bg-gray-100 focus:outline-none">21
    </a>

<a href="#"
        class="px-2 py-1 sm:px-4 sm:py-2 mt-2 text-gray-600 border rounded-lg hover:bg-gray-100 focus:outline-none">
        <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
            aria-hidden="true">
            <path fill-rule="evenodd"
                d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
                clip-rule="evenodd"></path>
        </svg>
    </a>
</div>

Related Examples

Pagination

Lîmåã M

3 years ago

11.9k
Simple pagination

Elijah Davis

3 years ago

9.7k
Pagination with active page indicator

Leif99

3 years ago

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

Leif99

3 years ago

12.2k
Pagination small
Suitable for large no of pages

Prajwal Hallale

3 years ago

7.6k
Simple Pagination

Gopi Yadav

3 years ago

10.7k
Boutons iOS 26
Boutons iOS 26

Omer fils ELENGA

10 months ago

736
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
Button group

Conan Hilton

4 years ago

9.8k
Basic pagination

Freja Jensen

3 years ago

13.5k
Pagination - Htmlwind
Centered numbers pagination

Htmlwind

1 year ago

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

Sufyan jutt

10 months ago

905

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.