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.9k
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

8k
Previous page - Next page Buttons

Author:
Krishna Gudpalle

3 years ago

13.9k
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.6k
My Coding Journey
To transform a standard timeline into an engaging, scroll-driven narrative experience.

Author:
Code Master(Mfuranziza Dusabe Hamza)

6 months ago

608
Pagination

Author:
Anonymous

1 year ago

1.5k
Pagination with active page indicator

Author:
Leif99

3 years ago

13.2k
vscode a la omerlinks
vscode a la omerlinks

Author:
Omer fils ELENGA

3 months ago

302
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

2 years ago

8.4k
Pagination
It's my first project which i made him in the using tailwind css and html

Author:
Sufyan jutt

4 months ago

197
Pagination small
Suitable for large no of pages

Author:
Prajwal Hallale

3 years ago

7.5k
Pagination

Author:
Sienna

3 years ago

11k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components