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

Simple Pagination

Author:
Gopi Yadav

2 years ago

10.2k
My Coding Journey
To transform a standard timeline into an engaging, scroll-driven narrative experience.

Author:
Code Master(Mfuranziza Dusabe Hamza)

3 months ago

482
Simple Pagination

Author:
Manuela Bianka

3 years ago

12k
Pagination

Author:
Prem..

3 years ago

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

850
Back and next navigation buttons

Author:
Fagundo67

3 years ago

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

10 months ago

1k
Previous page - Next page Buttons

Author:
Krishna Gudpalle

3 years ago

13.7k
Pagination

Author:
Anonymous

1 year ago

1.5k
vscode a la omerlinks
vscode a la omerlinks

Author:
Omer fils ELENGA

1 month ago

124
Content Discovery Platform with Search & Filter
A modern, responsive web application built with Tailwind CSS that showcases content cards with search and filter functionality.

Author:
Sufyan jutt

2 months ago

186
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

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