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

2 years ago

13k
ACODE MASTER — Cyberpunk Full Stack Developer from Rwanda
"I’m ACODE MASTER — a visionary Full Stack Developer from Rwanda, blending cutting-edge tech with bold design. I specialize in building modern web applications using React, Node.js, and TailwindCSS, inspired by the cyberpunk aesthetic and driven by a passion for digital innovation. Welcome to the future of code."

Author:
Code Master(Mfuranziza Dusabe Hamza)

7 months ago

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

1 month ago

85
Pagination small
Suitable for large no of pages

Author:
Prajwal Hallale

3 years ago

7.5k
Previous Next Buttons
Pagination buttons

Author:
Alok

3 years ago

14.2k
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)

7 months ago

864
Pagination - Htmlwind
Centered numbers pagination

Author:
Htmlwind

6 months ago

703
Simple rounded pagination
It has a minimalistic look with options to go to the previous and next pages and click on specific page numbers.

Author:
Diego Chavez

2 years ago

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

2.2k
Previous page - Next page Buttons

Author:
Krishna Gudpalle

3 years ago

13.6k
Button group

Author:
Conan Hilton

3 years ago

9k
Simple Pagination

Author:
Gopi Yadav

2 years ago

10.2k

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