Home
Amit Pachange
Pagination with hover effect

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 CSS v3.

Pagination

Author Amit Pachange

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

Author:
Leon Bachmann

3 years ago

10.7k
chat ui advanced
Professional chat ui, connect me for jsx https://abhirajk.vercel.app/

Author:
Abhiraj

1 year ago

1.7k
FLESH & BONE
Stranded in the heart of a cannibal-infested jungle, you must make unthinkable choices to survive. How far will you go to see another sunrise?

Author:
gidy

4 months ago

289
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

8k
Basic pagination

Author:
Sophia Baker

3 years ago

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

Author:
Code Master(Mfuranziza Dusabe Hamza)

9 months ago

1.1k
Pagination

Author:
Nishant Trivedi

2 years ago

9.9k
Simple Pagination

Author:
Manuela Bianka

3 years ago

12.1k
Simple Pagination

Author:
Gopi Yadav

3 years ago

10.3k
Employee table
Modern Unique and responsive table layout

Author:
Rajesh Maheshwari

1 year ago

2.7k
Employee table
Modern Unique and responsive table layout

Author:
Anonymous

5 months ago

551
Pagination

Author:
Lîmåã M

2 years ago

11.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components