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

10k
Simple pagination

Author:
Elijah Davis

2 years ago

8.8k
Pagination

Author:
Lîmåã M

2 years ago

11.1k
Simple Pagination

Author:
Gopi Yadav

2 years ago

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

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

1 year ago

7.5k
Pagination - Htmlwind
Centered numbers pagination

Author:
Htmlwind

4 months ago

336
Button group

Author:
Conan Hilton

3 years ago

8.8k
Pagination round buttons

Author:
Livia Flores

2 years ago

11.6k
Simple Pagination

Author:
Manuela Bianka

3 years ago

11.8k
ACODE MASTER — Cyberpunk Full Stack Developer from Rwanda
"I’m ACODE MASTER — a visionary Full Stack Developer from Rwanda, blending cutting-edge tech with bold design. I specialize in building modern web applications using React, Node.js, and TailwindCSS, inspired by the cyberpunk aesthetic and driven by a passion for digital innovation. Welcome to the future of code."

Author:
Code Master(Mfuranziza Dusabe Hamza)

4 months ago

1k
Pagination with active page indicator

Author:
Leif99

2 years ago

13k

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