Responsive pagination with items per page filter

Forked from @leif99/pagination-with-active-page-indicator

Displays previous and next pagination buttons on mobile devices

This tailwind example is contributed by Leif99, on 13-Mar-2023. Component is made with Tailwind v3.4. It is responsive. It supports dark mode.

Pagination

Author Leif99

Tailwind v3.4 12.2k 18

Fork Fullscreen

<div class="p-2 border-t dark:border-gray-700  w-full">
        <nav role="navigation" aria-label="Pagination Navigation" class="flex items-center justify-between">
            <div class="flex justify-between items-center flex-1 lg:hidden">
                <div class="w-10">
                    <button title="Previous" type="button"
                    class=" flex items-center justify-center rounded-full relative outline-none hover:bg-gray-500/5 disabled:opacity-70 disabled:cursor-not-allowed disabled:pointer-events-none text-yellow-500 focus:bg-yellow-500/10 dark:hover:bg-gray-300/5 w-10 h-10"
                    rel="prev">
                    <span class="sr-only">
                        Previous
                    </span>

</button>
                </div>

<div class="hidden flex-1 items-center lg:grid grid-cols-3">
                <div class="flex items-center">
                    <div class="pl-2 text-sm font-medium dark:text-white">
                        Showing 11 to 20 of 99 results
                    </div>
                </div>

Related Examples

Pagination

Leon Bachmann

3 years ago

11.6k
Simple rounded pagination
It has a minimalistic look with options to go to the previous and next pages and click on specific page numbers.

Diego Chavez

3 years ago

8.7k
Previous page - Next page Buttons

Krishna Gudpalle

4 years ago

14.3k
MULTI-STEP FORM component
MULTI-STEP FORM WIZARD · Open Source Component Steps: Personal → Role → Preferences → Goals → Review Features: stepper, validation, conditional fields, localStorage, animated transitions, review summary

Ijila Itunu

6 months ago

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

zobaidul kaziex

2 years ago

3.2k
Pagination

Prem..

4 years ago

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

Bogdan Galin

3 years ago

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

Indra

1 year ago

1k
Pagination with active page indicator

Leif99

3 years ago

13.9k
Pagination

Lîmåã M

3 years ago

11.9k
Pagination

Anonymous

2 years ago

2.1k
TailwindFlex – Creative Animated Home Experience
"Innovative Home with Tailwind Animated Background" "Animated Hero – TailwindFlex Design" "Smooth UI – Creative Motion with Tailwind CSS" "Home Harmony – Motion Meets Design" "TailwindFlex Home – Fluid Animation & UI"

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.7k