Home
Freja Jensen
Basic pagination

Basic pagination

This tailwind example is contributed by Freja Jensen, on 11-Jan-2023. Component is made with Tailwind CSS v3. It is responsive.

Pagination

Author Freja Jensen

13k

Fork Fullscreen

<nav class="mt-12 flex items-center justify-between border-t border-gray-200 px-4 pt-12 sm:px-6"
    aria-label="Pagination">
    <div class="flex flex-1 justify-between">
        <a class="relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
            rel="prev" href="/"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512"
                height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
                <path
                    d="M257.5 445.1l-22.2 22.2c-9.4 9.4-24.6 9.4-33.9 0L7 273c-9.4-9.4-9.4-24.6 0-33.9L201.4 44.7c9.4-9.4 24.6-9.4 33.9 0l22.2 22.2c9.5 9.5 9.3 25-.4 34.3L136.6 216H424c13.3 0 24 10.7 24 24v32c0 13.3-10.7 24-24 24H136.6l120.5 114.8c9.8 9.3 10 24.8.4 34.3z">
                </path>
            </svg> &nbsp; Previous
        </a>
        <a class="relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
            rel="prev" href="/"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 576 512"
                height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
                <path
                    d="M280.37 148.26L96 300.11V464a16 16 0 0 0 16 16l112.06-.29a16 16 0 0 0 15.92-16V368a16 16 0 0 1 16-16h64a16 16 0 0 1 16 16v95.64a16 16 0 0 0 16 16.05L464 480a16 16 0 0 0 16-16V300L295.67 148.26a12.19 12.19 0 0 0-15.3 0zM571.6 251.47L488 182.56V44.05a12 12 0 0 0-12-12h-56a12 12 0 0 0-12 12v72.61L318.47 43a48 48 0 0 0-61 0L4.34 251.47a12 12 0 0 0-1.6 16.9l25.5 31A12 12 0 0 0 45.15 301l235.22-193.74a12.19 12.19 0 0 1 15.3 0L530.9 301a12 12 0 0 0 16.9-1.6l25.5-31a12 12 0 0 0-1.7-16.93z">
                </path>
            </svg> &nbsp; Home
        </a>
        <a class="relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
            rel="next">Next Page &nbsp; <svg stroke="currentColor" fill="currentColor" stroke-width="0"
                viewBox="0 0 448 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
                <path
                    d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z">
                </path>
            </svg>
        </a>
    </div>
</nav>

Related Examples

Previous page - Next page Buttons

Author:
Krishna Gudpalle

3 years ago

13.8k
Pagination

Author:
Nishant Trivedi

2 years ago

9.9k
Employee table
Modern Unique and responsive table layout

Author:
Anonymous

4 months ago

506
Simple Pagination

Author:
Gopi Yadav

3 years ago

10.2k
Basic pagination

Author:
Sophia Baker

3 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)

8 months ago

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

Author:
Abhiraj

1 year ago

1.6k
Simple pagination

Author:
Elijah Davis

3 years ago

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

Author:
Diego Chavez

2 years ago

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

11 months ago

1.1k
ACODE,ASTER
love my projuct

Author:
Code Master(Mfuranziza Dusabe Hamza)

8 months ago

732
Pagination
This is a simple pagination

Author:
Khalid

1 year ago

2.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components