Home
Diego Chavez
Simple rounded pagination

Simple rounded pagination

It has a minimalistic look with options to go to the previous and next pages and click on specific page numbers.

This tailwind example is contributed by Diego Chavez, on 16-Oct-2023. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode.

Pagination

Author Diego Chavez

7.6k

Fork Fullscreen

<div class="container mx-auto px-4">
    <nav class="flex flex-row flex-nowrap justify-between md:justify-center items-center" aria-label="Pagination">
        
        <a class="flex w-10 h-10 mr-1 justify-center items-center rounded-full border border-gray-200 bg-white dark:bg-gray-800 text-black dark:text-white hover:border-gray-300 dark:hover:border-gray-600"
            href="#" title="Previous Page">
            <span class="sr-only">Previous Page</span>
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                stroke="currentColor" class="block w-5 h-5">
                <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
            </svg>
        </a>
        
        <a class="hidden md:flex w-10 h-10 mx-1 justify-center items-center rounded-full border border-gray-200 bg-white dark:bg-gray-700 text-black dark:text-white hover:border-gray-300 dark:hover:border-gray-600"
            href="#" title="Page 1">
            1
        </a>
        <a class="hidden md:flex w-10 h-10 mx-1 justify-center items-center rounded-full border border-gray-200 bg-white dark:bg-gray-700 text-black dark:text-white hover:border-gray-300 dark:hover:border-gray-600"
            href="#" title="Page 2">
            2
        </a>
        <a class="hidden md:flex w-10 h-10 mx-1 justify-center items-center rounded-full border border-black dark:border-white dark:bg-black dark:text-white pointer-events-none"
            href="#" aria-current="page" title="Page 3">
            3
        </a>
        <a class="hidden md:flex w-10 h-10 mx-1 justify-center items-center rounded-full border border-gray-200 bg-white dark:bg-gray-700 text-black dark:text-white hover:border-gray-300 dark:hover:border-gray-600"
            href="#" title="Page 4">
            4
        </a>
        <a class="hidden md:flex w-10 h-10 mx-1 justify-center items-center rounded-full border border-gray-200 bg-white dark:bg-gray-700 text-black dark:text-white hover:border-gray-300 dark:hover:border-gray-600"
            href="#" title="Page 5">
            5
        </a>
        
        <a class="flex w-10 h-10 ml-1 justify-center items-center rounded-full border border-gray-200 bg-white dark:bg-gray-800 text-black dark:text-white hover:border-gray-300 dark:hover:border-gray-600"
            href="#" title="Next Page">
            <span class="sr-only">Next Page</span>
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                stroke="currentColor" class="block w-5 h-5">
                <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
            </svg>
        </a>
    </nav>
</div>

Related Examples

Pagination round buttons

Author:
Livia Flores

2 years ago

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

Author:
Leif99

2 years ago

11.5k
Basic pagination

Author:
Sophia Baker

2 years ago

12.3k
Simple Pagination

Author:
Gopi Yadav

2 years ago

10.1k
Basic pagination

Author:
Freja Jensen

2 years ago

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

9 months ago

769
Employee table
Modern Unique and responsive table layout

Author:
Rajesh Maheshwari

9 months ago

2.1k
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.1k
Previous page - Next page Buttons

Author:
Krishna Gudpalle

3 years ago

13.5k
Simple pagination

Author:
Elijah Davis

2 years ago

8.9k
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)

6 months ago

824
Pagination

Author:
Prem..

3 years ago

11.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components