Home
Leif99
Responsive pagination with items per page filter

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 CSS v3. It is responsive. It supports dark mode.

Pagination

Author Leif99

11.7k

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

Author:
Leon Bachmann

3 years ago

10.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.

Author:
Diego Chavez

2 years ago

7.9k
Previous page - Next page Buttons

Author:
Krishna Gudpalle

3 years ago

13.8k
Button group

Author:
Conan Hilton

3 years ago

9.1k
ACODE MASTER — Cyberpunk Full Stack Developer from Rwanda
"I’m ACODE MASTER — a visionary Full Stack Developer from Rwanda, blending cutting-edge tech with bold design. I specialize in building modern web applications using React, Node.js, and TailwindCSS, inspired by the cyberpunk aesthetic and driven by a passion for digital innovation. Welcome to the future of code."

Author:
Code Master(Mfuranziza Dusabe Hamza)

9 months ago

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

Author:
zobaidul kaziex

1 year ago

2.4k
Previous Next Buttons
Pagination buttons

Author:
Alok

3 years ago

14.4k
Pagination

Author:
Anonymous

1 year ago

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

Author:
Code Master(Mfuranziza Dusabe Hamza)

5 months ago

591
chat ui advanced
Professional chat ui, connect me for jsx https://abhirajk.vercel.app/

Author:
Abhiraj

1 year ago

1.7k
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"

Author:
Code Master(Mfuranziza Dusabe Hamza)

9 months ago

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

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components