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
SomaRwanda
Menya uburyo bwo kwandika ibisomwa, impuzandimi, n'imyandikire y'icyongereza mu buryo bworoshye.

Author:
Code Master(Mfuranziza Dusabe Hamza)

5 months ago

794
Simple pagination

Author:
Elijah Davis

2 years ago

8.9k
Code Editor UI
Simple code editor prototype made with HTML and TailwindCSS. A lightweight template to explore and customize.

Author:
Indra

2 months ago

143
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

3 weeks ago

422
Button group

Author:
Conan Hilton

3 years ago

8.8k
Basic pagination

Author:
Freja Jensen

2 years ago

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

Author:
Code Master(Mfuranziza Dusabe Hamza)

2 months ago

196
Previous page - Next page Buttons

Author:
Krishna Gudpalle

3 years ago

13.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components