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

Simple Pagination

Manuela Bianka

4 years ago

12.6k
Simple pagination

Elijah Davis

3 years ago

9.7k
The Free AI Tools Grid Section (210+ Tools, No Signup)
A responsive and SEO-optimized grid section showcasing over 210 free AI tools. Designed with Tailwind CSS, fully responsive, fast-loading, and built for high user engagement. No sign-up required, privacy-friendly, and optimized for performance and discoverability.https://www.thefreeaitools.com/

Achraf Testq

6 months ago

630
Pagination small
Suitable for large no of pages

Prajwal Hallale

3 years ago

7.6k
SomaRwanda
Menya uburyo bwo kwandika ibisomwa, impuzandimi, n'imyandikire y'icyongereza mu buryo bworoshye.

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.6k
Pagination with active page indicator

Leif99

3 years ago

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

Sienna

3 years ago

11.2k
vscode a la omerlinks
vscode a la omerlinks

Omer fils ELENGA

10 months ago

648
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
Pagination

Lîmåã M

3 years ago

11.9k
Pagination

Anonymous

2 years ago

2.1k