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

2

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:
Manuela Bianka

2 years ago

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

Author:
Abhiraj

2 months ago

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

Author:
zobaidul kaziex

10 months ago

1.6k
Previous Next Buttons
Pagination buttons

Author:
Alok

2 years ago

13.1k
Pagination small
Suitable for large no of pages

Author:
Prajwal Hallale

2 years ago

7.5k
Employee table
Modern Unique and responsive table layout

Author:
Rajesh Maheshwari

1 month ago

318
Simple Pagination

Author:
Gopi Yadav

2 years ago

9.7k
Back and next navigation buttons

Author:
Fagundo67

2 years ago

10.5k
Pagination

Author:
Prem..

2 years ago

10.8k
Pagination

Author:
Lîmåã M

1 year ago

10.5k
Pagination

Author:
Anonymous

6 months ago

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

Author:
Leif99

2 years ago

10.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ 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