Home
Prem..
Pagination

Pagination

This tailwind example is contributed by Prem.., on 18-Jul-2022. Component is made with Tailwind CSS v3. It is responsive.

Pagination

Author Prem..

11.5k

10

Fork Fullscreen

<div class="flex items-center">
    <button class="w-full p-4 border text-base rounded-l-xl text-gray-600 bg-white hover:bg-gray-100">
        <svg width="9" fill="currentColor" height="8" class="" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
            <path d="M1427 301l-531 531 531 531q19 19 19 45t-19 45l-166 166q-19 19-45 19t-45-19l-742-742q-19-19-19-45t19-45l742-742q19-19 45-19t45 19l166 166q19 19 19 45t-19 45z">
            </path>
        </svg>
    </button>
    <button class="w-full px-4 py-2 border-t border-b text-base text-indigo-500 bg-white hover:bg-gray-100">
        1
    </button>
    <button class="w-full px-4 py-2 border text-base text-gray-600 bg-white hover:bg-gray-100">
        2
    </button>
    <button class="w-full px-4 py-2 border-t border-b text-base text-gray-600 bg-white hover:bg-gray-100">
        3
    </button>
    <button class="w-full px-4 py-2 border text-base text-gray-600 bg-white hover:bg-gray-100">
        4
    </button>
    <button class="w-full p-4 border-t border-b border-r text-base rounded-r-xl text-gray-600 bg-white hover:bg-gray-100">
        <svg width="9" fill="currentColor" height="8" class="" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
            <path d="M1363 877l-742 742q-19 19-45 19t-45-19l-166-166q-19-19-19-45t19-45l531-531-531-531q-19-19-19-45t19-45l166-166q19-19 45-19t45 19l742 742q19 19 19 45t-19 45z">
            </path>
        </svg>
    </button>
</div>

Related Examples

Pagination with active page indicator

Author:
Leif99

3 years ago

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

Author:
Amit Pachange

3 years ago

9k
Previous Next Buttons
Pagination buttons

Author:
Alok

3 years ago

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

Author:
Code Master(Mfuranziza Dusabe Hamza)

5 months ago

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

Author:
Code Master(Mfuranziza Dusabe Hamza)

9 months ago

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

4 months ago

288
vscode a la omerlinks
vscode a la omerlinks

Author:
Omer fils ELENGA

3 months ago

200
Simple Pagination

Author:
Gopi Yadav

3 years ago

10.2k
Pagination

Author:
Anonymous

1 year ago

1.5k
Pagination

Author:
Lîmåã M

2 years ago

11.4k
Employee table
Modern Unique and responsive table layout

Author:
Rajesh Maheshwari

1 year ago

2.7k
ACODE,ASTER
love my projuct

Author:
Code Master(Mfuranziza Dusabe Hamza)

9 months ago

805

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