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

Author:
Bogdan Galin

2 years ago

8.3k
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"

Author:
Code Master(Mfuranziza Dusabe Hamza)

8 months ago

1k
Previous Next Buttons
Pagination buttons

Author:
Alok

3 years ago

14.3k
Basic pagination

Author:
Sophia Baker

3 years ago

12.5k
Pagination
Pagination with total page and current page.

Author:
Alok

3 years ago

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

Author:
zobaidul kaziex

1 year ago

2.4k
Pagination

Author:
Leon Bachmann

3 years ago

10.6k
Employee table
Modern Unique and responsive table layout

Author:
Anonymous

4 months ago

507
Responsive pagination with items per page filter
Displays previous and next pagination buttons on mobile devices

Author:
Leif99

2 years ago

11.7k
Pagination
It's my first project which i made him in the using tailwind css and html

Author:
Sufyan jutt

3 months ago

186
Employee table
Modern Unique and responsive table layout

Author:
Rajesh Maheshwari

11 months ago

2.6k
Basic pagination

Author:
Freja Jensen

3 years ago

13k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components