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

7.8k

Fork Fullscreen

<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

Pagination
This is a simple pagination

Author:
Khalid

1 year ago

1.7k
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.6k
Pagination small
Suitable for large no of pages

Author:
Prajwal Hallale

2 years ago

7.5k
Basic pagination

Author:
Sophia Baker

2 years ago

11.3k
Simple Pagination

Author:
Gopi Yadav

2 years ago

9.7k
Pagination

Author:
Nishant Trivedi

1 year ago

9.2k
Previous Next Buttons
Pagination buttons

Author:
Alok

2 years ago

13.1k
Employee table
Modern Unique and responsive table layout

Author:
Rajesh Maheshwari

1 month ago

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

Author:
zobaidul kaziex

10 months ago

1.6k
Pagination

Author:
Prem..

2 years ago

10.8k
Basic pagination

Author:
Freja Jensen

2 years ago

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

1 month ago

143

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components