Home
Prajwal Hallale
Pagination small

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

Pagination

Author Prajwal Hallale

7.5k

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

Author:
Leon Bachmann

2 years ago

9.8k
Simple pagination

Author:
Elijah Davis

2 years ago

8.5k
Simple Pagination

Author:
Gopi Yadav

2 years ago

10k
Pagination

Author:
Lîmåã M

2 years ago

10.8k
Basic pagination

Author:
Freja Jensen

2 years ago

12.5k
Pagination

Author:
Anonymous

9 months ago

1.1k
Responsive Pagination Component with Tailwind CSS
This is a sleek and responsive pagination component built with Tailwind CSS. It features previous and next buttons, numbered pages, and an ellipsis (...) for better navigation when handling large sets of pages. The active page is highlighted with a bold border and color, while the disabled state is styled for clarity. The design is clean, minimal, and fully responsive, making it suitable for modern web applications.

Author:
SHARIFUL ISLAM

5 months ago

431
Pagination round buttons

Author:
Livia Flores

2 years ago

11.5k
Back and next navigation buttons

Author:
Fagundo67

2 years ago

11.3k
Simple Pagination

Author:
Manuela Bianka

2 years ago

11.5k
Basic pagination

Author:
Leon Bachmann

2 years ago

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

1 year ago

7.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2025 TailwindFlex. All Rights Reserved.

v1.1