Pagination

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

Pagination

Author Lîmåã M

Tailwind v3.4 11.9k 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

Leon Bachmann

3 years ago

11.6k
Basic pagination

Sophia Baker

3 years ago

13.3k
Pagination small
Suitable for large no of pages

Prajwal Hallale

3 years ago

7.6k
Basic pagination

Freja Jensen

3 years ago

13.5k
Simple pagination

Elijah Davis

3 years ago

9.7k
vscode a la omerlinks
vscode a la omerlinks

Omer fils ELENGA

9 months ago

603
Pagination round buttons

Livia Flores

3 years ago

12.6k
Button group

Conan Hilton

4 years ago

9.8k
Basic pagination

Leon Bachmann

3 years ago

9.4k
Simple Pagination

Manuela Bianka

4 years ago

12.6k
Boutons iOS 26
Boutons iOS 26

Omer fils ELENGA

10 months ago

736
Pagination - Htmlwind
Centered numbers pagination

Htmlwind

1 year ago

1.2k

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.