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

2k

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

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)

1 month ago

341
Basic pagination

Author:
Sophia Baker

2 years ago

11.6k
Pagination with active page indicator

Author:
Leif99

2 years ago

12.7k
Pagination
Pagination with total page and current page.

Author:
Alok

2 years ago

10.4k
Pagination

Author:
Sienna

2 years ago

10.4k
ACODE,ASTER
love my projuct

Author:
Code Master(Mfuranziza Dusabe Hamza)

1 month ago

225
Basic pagination

Author:
Freja Jensen

2 years ago

12.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)

1 month ago

372
Clean Pagination

Author:
Anonymous

6 months ago

697
Employee table
Modern Unique and responsive table layout

Author:
Rajesh Maheshwari

4 months ago

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

Author:
Abhiraj

5 months ago

1k
Pagination

Author:
Nishant Trivedi

2 years ago

9.6k

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