Pagination

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

Pagination

Author Prem..

Tailwind v3.4 12.3k 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

Leif99

3 years ago

13.9k
vscode a la omerlinks
vscode a la omerlinks

Omer fils ELENGA

9 months ago

603
Code Editor UI
Simple code editor prototype made with HTML and TailwindCSS. A lightweight template to explore and customize.

Indra

1 year ago

1k
Button group

Conan Hilton

4 years ago

9.8k
Basic pagination

Freja Jensen

3 years ago

13.5k
ACODE,ASTER
love my projuct

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.4k
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
TailwindFlex – Creative Animated Home Experience
"Innovative Home with Tailwind Animated Background" "Animated Hero – TailwindFlex Design" "Smooth UI – Creative Motion with Tailwind CSS" "Home Harmony – Motion Meets Design" "TailwindFlex Home – Fluid Animation & UI"

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.7k
Pagination small
Suitable for large no of pages

Prajwal Hallale

3 years ago

7.6k
Employee table
Modern Unique and responsive table layout

Rajesh Maheshwari

1 year ago

3.4k
Boutons iOS 26
Boutons iOS 26

Omer fils ELENGA

10 months ago

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

SHARIFUL ISLAM

1 year ago

1.9k

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.