Pagination small

Suitable for large no of pages

This tailwind example is contributed by Prajwal Hallale, on 21-Nov-2022. Component is made with Tailwind v3.4.

Pagination

Author Prajwal Hallale

Tailwind v3.4 7.6k 9

Fork Fullscreen

<div class="flex justify-end">

<nav class="relative z-0 inline-flex flex-wrap -space-x-px rounded-md shadow-md">
        <a href="#" class="relative inline-flex items-center rounded-l-md p-2 text-sm text-gray-500 hover:bg-gray-200">
            <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
                aria-hidden="true">
                <path fill-rule="evenodd"
                    d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z"
                    clip-rule="evenodd" />
            </svg>
        </a>

<a href="" class="relative inline-flex items-center text-sm text-gray-500 p-2 md:px-3 md:py-2 hover:bg-gray-200">1</a>
        <a href="" class="relative inline-flex items-center text-sm text-gray-500 p-2 md:px-3 md:py-2 hover:bg-gray-200">2</a>
        <a href="" class="relative inline-flex items-center text-sm text-gray-500 p-2 md:px-3 md:py-2 hover:bg-gray-200">3</a>
        <a href="" class="relative inline-flex items-center border border-indigo-300 text-sm p-2 md:px-3 md:py-2 hover:bg-gray-200">4</a>
        <a href="" class="relative inline-flex items-center text-sm text-gray-500 p-2 md:px-3 md:py-2 hover:bg-gray-200">5</a>
        <a href="" class="relative inline-flex items-center text-sm text-gray-500 p-2 md:px-3 md:py-2 hover:bg-gray-200">6</a>
        <a href="" class="relative inline-flex items-center text-sm text-gray-500 p-2 md:px-3 md:py-2 hover:bg-gray-200">7</a>

<a href="" class="relative inline-flex items-center rounded-r-md p-2 text-sm text-gray-500 hover:bg-gray-200 ">
            <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
                aria-hidden="true">
                <path fill-rule="evenodd"
                    d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
                    clip-rule="evenodd" />
            </svg>
        </a>
    </nav>

</div>

Related Examples

Pagination

Leon Bachmann

3 years ago

11.7k
Simple pagination

Elijah Davis

3 years ago

9.7k
Pagination

Lîmåã M

3 years ago

11.9k
Simple Pagination

Gopi Yadav

3 years ago

10.7k
Pagination with active page indicator

Leif99

3 years ago

14k
Basic pagination

Sophia Baker

3 years ago

13.5k
Button group

Conan Hilton

4 years ago

9.8k
Pagination

Sienna

3 years ago

11.2k
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
Clean Pagination

Anonymous

1 year ago

1.9k
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
Back and next navigation buttons

Fagundo67

3 years ago

12.8k

Browse by topic

Explore components by Tags

Jump straight to the UI pattern you need.

Footer Header Card Article Avatar FAQ Banner Blog Breadcrumb Button Call to Action Form Carousel Contact us Error page Feature Gallery Hero Input Spinner Login Modal Pagination Pricing Profile

Can't find it?

Didn't find the component you were looking for?

Search across 3,000+ community-built components and grab the code in seconds.