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

This tailwind example is contributed by Amit Pachange, on 18-Jul-2022. Component is made with Tailwind v3.4.

Pagination

Author Amit Pachange

Tailwind v3.4 9.7k 12

Fork Fullscreen

<ul class="inline-flex">
    <li>
        <button class="h-8 px-5 text-gray-400 font-bold transition-colors duration-150 bg-white border border-r-0 border-gray-500 rounded-l-lg focus:shadow-outline hover:bg-indigo-100">First</button>
    </li>
    <li>
        <button class="h-8 px-5 text-indigo-600 font-bold transition-colors duration-150 bg-white border border-r-0 border-gray-500 focus:shadow-outline hover:bg-indigo-100">1</button>
    </li>
    <li>
        <button class="h-8 px-5 text-indigo-600 font-bold transition-colors duration-150 bg-white border border-r-0 border-gray-500 focus:shadow-outline hover:bg-indigo-100">2</button>
    </li>
    <li>
        <button class="h-8 px-5 text-white font-bold transition-colors duration-150 bg-indigo-600 border border-r-0 border-gray-500 focus:shadow-outline">3</button>
    </li>
    <li>
        <button class="h-8 px-5 text-indigo-600 font-bold transition-colors duration-150 bg-white border border-gray-500 rounded-r-lg focus:shadow-outline hover:bg-indigo-100">Next</button>
    </li>
</ul>

Related Examples

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
Previous page - Next page Buttons

Krishna Gudpalle

4 years ago

14.3k
Pagination with active page indicator

Leif99

3 years ago

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

2k
Pagination - Htmlwind
Centered numbers pagination

Htmlwind

1 year ago

1.2k
ACODE,ASTER
love my projuct

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.4k
Engineering Project Dashboard
Track engineering assignments, project progress, technology stack, and delivery timelines in one simple dashboard.

Ayyamperumal S

7 months ago

536
Pagination

Anonymous

2 years ago

2.1k
Basic pagination

Leon Bachmann

3 years ago

9.4k
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
Simple Pagination

Gopi Yadav

3 years ago

10.7k
Back and next navigation buttons

Fagundo67

3 years ago

12.8k