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

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.4k
Simple pagination

Author:
Elijah Davis

3 years ago

9.4k
Pagination with active page indicator

Author:
Leif99

3 years ago

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

Author:
Leif99

2 years ago

11.7k
Pagination small
Suitable for large no of pages

Author:
Prajwal Hallale

3 years ago

7.5k
Simple Pagination

Author:
Gopi Yadav

3 years ago

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

Author:
Sufyan jutt

3 months ago

269
FLESH & BONE
Stranded in the heart of a cannibal-infested jungle, you must make unthinkable choices to survive. How far will you go to see another sunrise?

Author:
gidy

3 months ago

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

Author:
Abhiraj

1 year ago

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

Author:
Code Master(Mfuranziza Dusabe Hamza)

5 months ago

602
Pagination - Htmlwind
Centered numbers pagination

Author:
Htmlwind

9 months ago

930
Previous page - Next page Buttons

Author:
Krishna Gudpalle

3 years ago

13.9k

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

© 2026 TailwindFlex. All Rights Reserved.

v1.12