Home
Sophia Baker
Basic pagination

Basic pagination

This tailwind example is contributed by Sophia Baker, on 27-Jan-2023. Component is made with Tailwind CSS v3.

Pagination

Author Sophia Baker

12.4k

9

Fork Fullscreen

<div class="inline-flex rounded-xl">
    <ul class="flex items-center">
        <li class="px-2">
            <button aria-disabled="true" disabled="" class="w-9 h-9 flex items-center justify-center rounded-md border disabled">
                <span>
                    <svg width="8" height="15" viewBox="0 0 8 15" class="fill-current stroke-current"><path d="M7.12979 1.91389L7.1299 1.914L7.1344 1.90875C7.31476 1.69833 7.31528 1.36878 7.1047 1.15819C7.01062 1.06412 6.86296 1.00488 6.73613 1.00488C6.57736 1.00488 6.4537 1.07206 6.34569 1.18007L6.34564 1.18001L6.34229 1.18358L0.830207 7.06752C0.830152 7.06757 0.830098 7.06763 0.830043 7.06769C0.402311 7.52078 0.406126 8.26524 0.827473 8.73615L0.827439 8.73618L0.829982 8.73889L6.34248 14.6014L6.34243 14.6014L6.34569 14.6047C6.546 14.805 6.88221 14.8491 7.1047 14.6266C7.30447 14.4268 7.34883 14.0918 7.12833 13.8693L1.62078 8.01209C1.55579 7.93114 1.56859 7.82519 1.61408 7.7797L1.61413 7.77975L1.61729 7.77639L7.12979 1.91389Z" stroke-width="0.3"></path></svg>
                </span>
            </button>
        </li>
        <li class="px-2">
            <button class="w-9 h-9 rounded-md border hover:border-cyan-500 hover:text-indigo-500 text-indigo-500">1</button>
        </li>
        <li class="px-2">
            <button class="w-9 h-9 rounded-md border hover:border-cyan-500 hover:text-indigo-500">2</button>
        </li>
        <li class="px-2">
            <button class="w-9 h-9 rounded-md border hover:border-cyan-500 hover:text-indigo-500">3</button>
        </li>
        <li class="px-2">
            <button class="w-9 h-9 rounded-md border hover:border-cyan-500 hover:text-indigo-500">4</button>
        </li>
        <li class="px-2">
            <button class="w-9 h-9 rounded-md border hover:border-cyan-500 hover:text-indigo-500">5</button>
        </li>
        <li class="px-2">
            <button aria-disabled="false" class="w-9 h-9 flex items-center justify-center rounded-md border hover:text-indigo-500">
                <span>
                    <svg width="8" height="15" viewBox="0 0 8 15" class="fill-current stroke-current"><path d="M0.870212 13.0861L0.870097 13.086L0.865602 13.0912C0.685237 13.3017 0.684716 13.6312 0.895299 13.8418C0.989374 13.9359 1.13704 13.9951 1.26387 13.9951C1.42264 13.9951 1.5463 13.9279 1.65431 13.8199L1.65436 13.82L1.65771 13.8164L7.16979 7.93248C7.16985 7.93243 7.1699 7.93237 7.16996 7.93231C7.59769 7.47923 7.59387 6.73477 7.17253 6.26385L7.17256 6.26382L7.17002 6.26111L1.65752 0.398611L1.65757 0.398563L1.65431 0.395299C1.454 0.194997 1.11779 0.150934 0.895299 0.373424C0.695526 0.573197 0.651169 0.908167 0.871667 1.13067L6.37922 6.98791C6.4442 7.06886 6.43141 7.17481 6.38592 7.2203L6.38587 7.22025L6.38271 7.22361L0.870212 13.0861Z" stroke-width="0.3"></path></svg>
                </span>
            </button>
        </li>
    </ul>
</div>

Related Examples

Pagination

Author:
Lîmåã M

2 years ago

11.2k
Pagination
Pagination with total page and current page.

Author:
Alok

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

7.7k
Responsive pagination with items per page filter
Displays previous and next pagination buttons on mobile devices

Author:
Leif99

2 years ago

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

Author:
Sufyan jutt

1 month ago

75
Pagination

Author:
Sienna

2 years ago

10.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:
Code Master(Mfuranziza Dusabe Hamza)

7 months ago

1.4k
Back and next navigation buttons

Author:
Fagundo67

2 years ago

12.1k
Basic pagination

Author:
Freja Jensen

2 years ago

12.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:
Code Master(Mfuranziza Dusabe Hamza)

7 months ago

840
Clean Pagination

Author:
Anonymous

11 months ago

1.2k
Pagination
This is a simple pagination

Author:
Khalid

1 year ago

2.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ 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.12