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

Pagination

Nishant Trivedi

3 years ago

10.2k
vscode a la omerlinks
vscode a la omerlinks

Omer fils ELENGA

11 months ago

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

Diego Chavez

3 years ago

8.8k
Pagination
This is a simple pagination

Khalid

2 years ago

3.1k
MULTI-STEP FORM component
MULTI-STEP FORM WIZARD · Open Source Component Steps: Personal → Role → Preferences → Goals → Review Features: stepper, validation, conditional fields, localStorage, animated transitions, review summary

Ijila Itunu

6 months ago

479
Simple Pagination

Manuela Bianka

4 years ago

12.6k
Productivity Dashboard UI
A modern developer productivity dashboard built using HTML, Tailwind CSS, JavaScript, and Chart.js. Features a premium SaaS-style UI with analytics cards, interactive charts, kanban sprint board, developer management table, live search functionality, responsive layouts, activity feeds, and modern frontend components. Designed for frontend developers to showcase dashboard architecture, UI/UX skills, responsive design systems, and interactive web application interfaces. Includes glassmorphism styling, developer workflow management, team collaboration sections, and portfolio-ready dashboard components optimized for modern admin experiences.

Ayyamperumal S

6 months ago

608
Previous and next with icons
Use the following code to show simple previous and next elements with icons. @zobaidulkazi

zobaidul kaziex

2 years ago

3.2k
ACODE,ASTER
love my projuct

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.5k
Pagination with active page indicator

Leif99

3 years ago

14k
Simple Pagination

Gopi Yadav

3 years ago

10.7k
Pagination

Lîmåã M

3 years ago

11.9k