Home
Leif99
Pagination with active page indicator

Pagination with active page indicator

This tailwind example is contributed by Leif99, on 21-Feb-2023. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode.

Pagination

Author Leif99

12.3k

12

Fork Fullscreen

<div class="h-screen flex justify-center items-center dark:bg-gray-800 w-full">

<div class="flex items-center justify-center">
        <div class="py-3 border rounded-lg dark:border-gray-600">
            <ol
                class="flex items-center text-sm text-gray-500 divide-x rtl:divide-x-reverse divide-gray-300 dark:text-gray-400 dark:divide-gray-600">
                <li>
                    <button type="button"
                    class="relative flex items-center justify-center font-medium min-w-[2rem] px-1.5 h-8 -my-3 rounded-md outline-none hover:bg-gray-500/5 focus:bg-yellow-500/10 focus:ring-2 focus:ring-yellow-500 dark:hover:bg-gray-400/5 transition text-yellow-600"
                    aria-label="Previous" rel="prev">
                    <svg class="w-5 h-5 rtl:scale-x-[-1]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
                        fill="currentColor" aria-hidden="true">
                        <path fill-rule="evenodd"
                            d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
                            clip-rule="evenodd"></path>
                    </svg>
                </button>
                </li>

<li>
                    <button type="button"
                    class="relative flex items-center justify-center font-medium min-w-[2rem] px-1.5 h-8 -my-3 rounded-md outline-none transition text-yellow-600 focus:underline bg-yellow-500/10 ring-2 ring-yellow-500">
                    <span>1</span>
                </button>
                </li>
                <li>
                    <button type="button"
                    class="relative flex items-center justify-center font-medium min-w-[2rem] px-1.5 h-8 -my-3 rounded-md outline-none hover:bg-gray-500/5 focus:bg-yellow-500/10 focus:ring-2 focus:ring-yellow-500 dark:hover:bg-gray-400/5 focus:text-yellow-600 transition">

<span>2</span>
                </button>
                </li>
                <li>
                    <button type="button"
                    class="relative flex items-center justify-center font-medium min-w-[2rem] px-1.5 h-8 -my-3 rounded-md outline-none hover:bg-gray-500/5 focus:bg-yellow-500/10 focus:ring-2 focus:ring-yellow-500 dark:hover:bg-gray-400/5 focus:text-yellow-600 transition">

<span>3</span>
                </button>
                </li>
                <li>
                    <button type="button"
                    class="relative flex items-center justify-center font-medium min-w-[2rem] px-1.5 h-8 -my-3 rounded-md outline-none hover:bg-gray-500/5 focus:bg-yellow-500/10 focus:ring-2 focus:ring-yellow-500 dark:hover:bg-gray-400/5 focus:text-yellow-600 transition">

<span>4</span>
                </button>
                </li>
                <li>
                    <button type="button"
                    class="relative flex items-center justify-center font-medium min-w-[2rem] px-1.5 h-8 -my-3 rounded-md outline-none hover:bg-gray-500/5 focus:bg-yellow-500/10 focus:ring-2 focus:ring-yellow-500 dark:hover:bg-gray-400/5 focus:text-yellow-600 transition">

<span>5</span>
                </button>
                </li>
                <li>
                    <button type="button"
                    class="relative flex items-center justify-center font-medium min-w-[2rem] px-1.5 h-8 -my-3 rounded-md outline-none hover:bg-gray-500/5 focus:bg-yellow-500/10 focus:ring-2 focus:ring-yellow-500 dark:hover:bg-gray-400/5 focus:text-yellow-600 transition">

<span>6</span>
                </button>
                </li>
                <li>
                    <button disabled="" type="button"
                    class="relative flex items-center justify-center font-medium min-w-[2rem] px-1.5 h-8 -my-3 rounded-md outline-none filament-tables-pagination-item-disabled cursor-not-allowed pointer-events-none opacity-70">

<span>...</span>
                </button>
                </li>

<li>
                    <button type="button"
                    class="relative flex items-center justify-center font-medium min-w-[2rem] px-1.5 h-8 -my-3 rounded-md outline-none hover:bg-gray-500/5 focus:bg-yellow-500/10 focus:ring-2 focus:ring-yellow-500 dark:hover:bg-gray-400/5 focus:text-yellow-600 transition">

<span>9</span>
                </button>
                </li>
                <li>
                    <button type="button"
                    class="relative flex items-center justify-center font-medium min-w-[2rem] px-1.5 h-8 -my-3 rounded-md outline-none hover:bg-gray-500/5 focus:bg-yellow-500/10 focus:ring-2 focus:ring-yellow-500 dark:hover:bg-gray-400/5 focus:text-yellow-600 transition">

<span>10</span>
                </button>
                </li>

<li>
                    <button type="button"
                    class="relative flex items-center justify-center font-medium min-w-[2rem] px-1.5 h-8 -my-3 rounded-md outline-none hover:bg-gray-500/5 focus:bg-yellow-500/10 focus:ring-2 focus:ring-yellow-500 dark:hover:bg-gray-400/5 transition text-yellow-600"
                    aria-label="Next" rel="next">
                    <svg class="w-5 h-5 rtl:scale-x-[-1]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
                        fill="currentColor" aria-hidden="true">
                        <path fill-rule="evenodd"
                            d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
                            clip-rule="evenodd"></path>
                    </svg>
                </button>
                </li>
            </ol>
        </div>
    </div>
</div>

Related Examples

Date picker
Date picker example using flatpickr library

Author:
Lîmåã M

1 year ago

15.8k
Pagination

Author:
Leon Bachmann

2 years ago

9.7k
Pagination

Author:
Prem..

2 years ago

10.9k
Simple pagination

Author:
Elijah Davis

2 years ago

8.5k
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:
Acode Master(Mfuranziza Dusabe Hamza)

6 days ago

59
Clean Pagination

Author:
Anonymous

4 months ago

570
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.9k
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:
Acode Master(Mfuranziza Dusabe Hamza)

1 week ago

48
AcodeMaster GameZone – Play Your Favorite Games Online
AcodeMaster GameZone is a modern gaming website where you can discover, explore, and play exciting games anytime, anywhere. Designed with smooth animations and a stylish dark theme using Tailwind CSS, it offers a fast and fun experience for every gamer.

Author:
Acode Master(Mfuranziza Dusabe Hamza)

1 week ago

106
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

2 years ago

8.2k
Pagination

Author:
Sienna

2 years ago

10.3k
Pagination

Author:
Lîmåã M

2 years ago

10.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components

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 Free CSS Components

© 2025 TailwindFlex. All Rights Reserved.

v1.1