Home
Leon Bachmann
Basic pagination

Basic pagination

This tailwind example is contributed by Leon Bachmann, on 06-Feb-2023. Component is made with Tailwind CSS v3. It is responsive.

Pagination

Author Leon Bachmann

7k

9

Fork Fullscreen

<nav class="flex">
    <ol role="list" class="flex items-center">
        <li class="text-left">
            <div class="-m-1">
                <a href="#"
                    class="rounded-md p-1 text-sm font-medium text-gray-600 focus:text-gray-900 focus:shadow hover:text-gray-800">
                    Home </a>
            </div>
        </li>

<li class="text-left">
            <div class="flex items-center">
                <span class="mx-2 text-gray-400">/</span>
                <div class="-m-1">
                    <a href="#"
                        class="rounded-md p-1 text-sm font-medium text-gray-600 focus:text-gray-900 focus:shadow hover:text-gray-800">
                        Products </a>
                </div>
            </div>
        </li>

<li class="text-left">
            <div class="flex items-center">
                <span class="mx-2 text-gray-400">/</span>
                <div class="-m-1">
                    <a href="#"
                        class="rounded-md p-1 text-sm font-medium text-gray-600 focus:text-gray-900 focus:shadow hover:text-gray-800"
                        aria-current="page"> Coffee </a>
                </div>
            </div>
        </li>
    </ol>
</nav>

Related Examples

Previous and next with icons
Use the following code to show simple previous and next elements with icons. @zobaidulkazi

Author:
zobaidul kaziex

3 months ago

486
Pagination small
Suitable for large no of pages

Author:
Prajwal Hallale

1 year ago

7.4k
Simple Pagination

Author:
Manuela Bianka

2 years ago

9.6k
Pagination

Author:
Nishant Trivedi

1 year ago

7.8k
Previous Next Buttons
Pagination buttons

Author:
Alok

1 year ago

11.8k
Pagination
Pagination with total page and current page.

Author:
Alok

2 years ago

9.6k
Pagination

Author:
Leon Bachmann

1 year ago

8.6k
Pagination

Author:
Sienna

1 year ago

9.6k
Pagination

Author:
Lîmåã M

1 year ago

9.5k
Simple Pagination

Author:
Gopi Yadav

1 year ago

9.1k
Back and next navigation buttons

Author:
Fagundo67

1 year ago

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

11 months ago

5.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 1600+ componenent

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

© 2024 TailwindFlex. All Rights Reserved.

v1.8