Home
Khalid
Pagination

Pagination

This is a simple pagination

This tailwind example is contributed by Khalid, on 08-Mar-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode.

Pagination

Author Khalid

1.8k

3

Fork Fullscreen

<div class="bg-white dark:bg-gray-800 flex justify-center items-center w-screen h-screen p-5">
    <div class="flex justify-center items-center mt-8">
        <button class="bg-transparent text-gray-700 dark:text-gray-200 font-semibold border border-gray-300 rounded-md px-2 py-1 rounded-md focus:outline-none dark:border-none">
            <svg class="h-6 w-6 fill-current" viewBox="0 0 20 20">
                <path d="M10 18l-8-8 8-8 1.414 1.414L4.828 10l6.586 6.586L10 18z"/>
            </svg>
        </button>
        <div class="flex mx-4 gap-2">
            <button class="bg-transparent text-gray-700 dark:text-gray-200 font-semibold min-w-[40px] border border-gray-300 rounded-md px-2 py-1 rounded-md focus:outline-none">
                1
            </button>
            <button class="bg-transparent text-gray-700 dark:text-gray-200 font-semibold min-w-[40px] border border-gray-300 rounded-md px-2 py-1 rounded-md focus:outline-none">
                2
            </button>
            <button class="bg-transparent text-gray-700 dark:text-gray-200 font-semibold min-w-[40px] border border-gray-300 rounded-md px-2 py-1 rounded-md focus:outline-none">
                3
            </button>
            
        </div>
        <button class="bg-transparent text-gray-700 dark:text-gray-200 font-semibold border border-gray-300 rounded-md px-2 py-1 rounded-md focus:outline-none dark:border-none">
            <svg class="h-6 w-6  fill-current" viewBox="0 0 20 20">
                <path d="M10 2l8 8-8 8-1.414-1.414L15.172 10l-6.586-6.586L10 2z"/>
            </svg>
        </button>
        <span class="mx-4 dark:text-gray-400">Page</span>
        <select class="border border-gray-300 rounded-md px-2 py-1 focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-white">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

</div>
</div>

Related Examples

Simple Pagination

Author:
Gopi Yadav

2 years ago

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

Author:
zobaidul kaziex

11 months ago

1.8k
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
Responsive pagination with items per page filter
Displays previous and next pagination buttons on mobile devices

Author:
Leif99

2 years ago

10.7k
Clean Pagination

Author:
Anonymous

4 months ago

570
Pagination

Author:
Nishant Trivedi

1 year ago

9.5k
Employee table
Modern Unique and responsive table layout

Author:
Rajesh Maheshwari

3 months ago

575
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
Back and next navigation buttons

Author:
Fagundo67

2 years ago

11k
Pagination

Author:
Sienna

2 years ago

10.3k
Basic pagination

Author:
Freja Jensen

2 years ago

12.5k
Responsive Pagination Component with Tailwind CSS
This is a sleek and responsive pagination component built with Tailwind CSS. It features previous and next buttons, numbered pages, and an ellipsis (...) for better navigation when handling large sets of pages. The active page is highlighted with a bold border and color, while the disabled state is styled for clarity. The design is clean, minimal, and fully responsive, making it suitable for modern web applications.

Author:
SHARIFUL ISLAM

3 months ago

259

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