Home
Anonymous
Pagination

Pagination

This tailwind example is contributed by Anonymous, on 04-Oct-2024. Component is made with Tailwind CSS v3. It is responsive.

Pagination

Author Anonymous

1.2k

Fork Fullscreen

<div class="p-4 mt-20">
  <nav class="flex items-center justify-between border-t border-gray-200 px-4 sm:px-0">
    <div class="-mt-px flex w-0 flex-1"><a
        class="inline-flex items-center border-t-2 border-transparent pt-4 pr-1 text-sm font-medium text-gray-300"
        href="/blog?page=0"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
          aria-hidden="true" class="mr-3 h-5 w-5 text-gray-300">
          <path fill-rule="evenodd"
            d="M18 10a.75.75 0 01-.75.75H4.66l2.1 1.95a.75.75 0 11-1.02 1.1l-3.5-3.25a.75.75 0 010-1.1l3.5-3.25a.75.75 0 111.02 1.1l-2.1 1.95h12.59A.75.75 0 0118 10z"
            clip-rule="evenodd"></path>
        </svg>Previous</a></div>
    <div class="hidden md:-mt-px md:flex"><a
        class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium border-violet-500 text-violet-600"
        href="/blog?page=1">1</a><a
        class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300"
        href="/blog?page=2">2</a><a
        class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300"
        href="/blog?page=3">3</a></div>
    <div class="-mt-px flex w-0 flex-1 justify-end"><a
        class="inline-flex items-center border-t-2 border-transparent pt-4 pl-1 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
        href="/blog?page=2">Next<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
          aria-hidden="true" class="ml-3 h-5 w-5 text-gray-400">
          <path fill-rule="evenodd"
            d="M2 10a.75.75 0 01.75-.75h12.59l-2.1-1.95a.75.75 0 111.02-1.1l3.5 3.25a.75.75 0 010 1.1l-3.5 3.25a.75.75 0 11-1.02-1.1l2.1-1.95H2.75A.75.75 0 012 10z"
            clip-rule="evenodd"></path>
        </svg></a></div>
  </nav>
</div>

Related Examples

Clean Pagination

Author:
Anonymous

8 months ago

918
Pagination

Author:
Sienna

2 years ago

10.5k
Pagination round buttons

Author:
Livia Flores

2 years ago

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

Author:
Leif99

2 years ago

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

2k
Simple pagination

Author:
Elijah Davis

2 years ago

8.8k
Previous page - Next page Buttons

Author:
Krishna Gudpalle

3 years ago

13.2k
Pagination
This is a simple pagination

Author:
Khalid

1 year ago

2.1k
Simple Pagination

Author:
Manuela Bianka

3 years ago

11.8k
Pagination with hover effect
Simple Pagination. If you have a website with lots of pages, you may wish to add some sort of pagination to each page for better navigation

Author:
Bogdan Galin

2 years ago

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

Author:
Indra

4 weeks ago

105
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

7 months ago

574

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components