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

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

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

Author:
Leif99

2 years ago

11.7k
Basic pagination

Author:
Sophia Baker

3 years ago

12.5k
Simple Pagination

Author:
Gopi Yadav

3 years ago

10.2k
Pagination small
Suitable for large no of pages

Author:
Prajwal Hallale

3 years ago

7.5k
Pagination
Pagination with total page and current page.

Author:
Alok

3 years ago

11.3k
Employee table
Modern Unique and responsive table layout

Author:
Anonymous

5 months ago

527
Clean Pagination

Author:
Anonymous

1 year ago

1.4k
FLESH & BONE
Stranded in the heart of a cannibal-infested jungle, you must make unthinkable choices to survive. How far will you go to see another sunrise?

Author:
gidy

3 months ago

286
Simple Pagination

Author:
Manuela Bianka

3 years ago

12.1k
Pagination
This is a simple pagination

Author:
Khalid

1 year ago

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

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components