Home
Leon Bachmann
Pagination

Pagination

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

Pagination

Author Leon Bachmann

10.1k

11

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

Author:
Lîmåã M

2 years ago

11.1k
Simple pagination

Author:
Elijah Davis

2 years ago

8.8k
Pagination with active page indicator

Author:
Leif99

2 years ago

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

Author:
Leif99

2 years ago

11.5k
Pagination small
Suitable for large no of pages

Author:
Prajwal Hallale

2 years ago

7.5k
Simple Pagination

Author:
Gopi Yadav

2 years ago

10.1k
Basic pagination

Author:
Sophia Baker

2 years ago

12.2k
Previous and next with icons
Use the following code to show simple previous and next elements with icons. @zobaidulkazi

Author:
zobaidul kaziex

1 year ago

2k
Pagination round buttons

Author:
Livia Flores

2 years ago

11.7k
Pagination

Author:
Prem..

3 years ago

11.3k
Pagination
This is a simple pagination

Author:
Khalid

1 year ago

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

8 months ago

655

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

© 2025 TailwindFlex. All Rights Reserved.

v1.12