Home
Lîmåã M
Pagination

Pagination

This tailwind example is contributed by Lîmåã M, on 25-May-2023. Component is made with Tailwind CSS v3. It is responsive.

Pagination

Author Lîmåã M

11.4k

12

Fork Fullscreen

<nav class="mb-4 flex justify-center space-x-4" aria-label="Pagination">

<span class="rounded-lg border border-teal-500 px-2 py-2 text-gray-700">
        <span class="sr-only">Previous</span>
        <svg class="mt-1 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.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
                clip-rule="evenodd">
            </path>
        </svg>
    </span>

<span class="rounded-lg border border-teal-500 bg-teal-500 px-4 py-2 text-white">1</span>
    
    <a class="rounded-lg border border-teal-500 px-4 py-2 text-gray-700" href="/page/2">2
    </a>

<a class="rounded-lg border border-teal-500 px-4 py-2 text-gray-700" href="/page/3">3
    </a>
    
    <a class="rounded-lg border border-teal-500 px-2 py-2 text-gray-700" href="/page/2">
        <span class="sr-only">Next</span>
        <svg class="mt-1 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.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
                clip-rule="evenodd">
            </path>
        </svg>
    </a>

</nav>

Related Examples

Pagination

Author:
Leon Bachmann

3 years ago

10.9k
Basic pagination

Author:
Sophia Baker

3 years ago

12.5k
Pagination small
Suitable for large no of pages

Author:
Prajwal Hallale

3 years ago

7.5k
Pagination

Author:
Anonymous

1 year ago

1.5k
Basic pagination

Author:
Freja Jensen

3 years ago

13.2k
Pagination

Author:
Sienna

3 years ago

11k
Code Editor UI
Simple code editor prototype made with HTML and TailwindCSS. A lightweight template to explore and customize.

Author:
Indra

6 months ago

474
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:
Amit Pachange

3 years ago

9k
My Coding Journey
To transform a standard timeline into an engaging, scroll-driven narrative experience.

Author:
Code Master(Mfuranziza Dusabe Hamza)

6 months ago

608
Simple pagination

Author:
Elijah Davis

3 years ago

9.4k
Boutons iOS 26
Boutons iOS 26

Author:
Omer fils ELENGA

3 months ago

587
Simple Pagination

Author:
Manuela Bianka

3 years ago

12.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ 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

© 2026 TailwindFlex. All Rights Reserved.

v1.12