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
vscode a la omerlinks
vscode a la omerlinks

Omer fils ELENGA

10 months ago

648
Basic pagination

Sophia Baker

3 years ago

13.3k
Pagination
Pagination with total page and current page.

Alok

4 years ago

12.1k
Productivity Dashboard UI
A modern developer productivity dashboard built using HTML, Tailwind CSS, JavaScript, and Chart.js. Features a premium SaaS-style UI with analytics cards, interactive charts, kanban sprint board, developer management table, live search functionality, responsive layouts, activity feeds, and modern frontend components. Designed for frontend developers to showcase dashboard architecture, UI/UX skills, responsive design systems, and interactive web application interfaces. Includes glassmorphism styling, developer workflow management, team collaboration sections, and portfolio-ready dashboard components optimized for modern admin experiences.

Ayyamperumal S

5 months ago

539
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

Bogdan Galin

3 years ago

8.9k
AcodeMaster GameZone – Play Your Favorite Games Online
AcodeMaster GameZone is a modern gaming website where you can discover, explore, and play exciting games anytime, anywhere. Designed with smooth animations and a stylish dark theme using Tailwind CSS, it offers a fast and fun experience for every gamer.

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

2k

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.