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

2.6k

4

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

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

Author:
Lîmåã M

2 years ago

11.3k
SomaRwanda
Menya uburyo bwo kwandika ibisomwa, impuzandimi, n'imyandikire y'icyongereza mu buryo bworoshye.

Author:
Code Master(Mfuranziza Dusabe Hamza)

8 months ago

1k
Pagination

Author:
Anonymous

1 year ago

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

8 months ago

1.1k
Employee table
Modern Unique and responsive table layout

Author:
Anonymous

4 months ago

506
Previous Next Buttons
Pagination buttons

Author:
Alok

3 years ago

14.3k
Simple Pagination

Author:
Gopi Yadav

3 years ago

10.2k
vscode a la omerlinks
vscode a la omerlinks

Author:
Omer fils ELENGA

2 months ago

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

Author:
Abhiraj

1 year ago

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

Author:
zobaidul kaziex

1 year ago

2.4k
Back and next navigation buttons

Author:
Fagundo67

3 years ago

12.3k

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

© 2026 TailwindFlex. All Rights Reserved.

v1.12