Pagination

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

Pagination

Author Anonymous

Tailwind v3.4 2.1k 1

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

Back and next navigation buttons

Fagundo67

3 years ago

12.8k
Button group

Conan Hilton

4 years ago

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

Amit Pachange

4 years ago

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

Bogdan Galin

3 years ago

9k
Productivity Dashboard UI
A modern developer productivity dashboard built using HTML, Tailwind CSS, JavaScript, and Chart.js. Features a premium SaaS-style UI with analytics cards, interactive charts, kanban sprint board, developer management table, live search functionality, responsive layouts, activity feeds, and modern frontend components. Designed for frontend developers to showcase dashboard architecture, UI/UX skills, responsive design systems, and interactive web application interfaces. Includes glassmorphism styling, developer workflow management, team collaboration sections, and portfolio-ready dashboard components optimized for modern admin experiences.

Ayyamperumal S

6 months ago

608
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?

gidy

1 year ago

1.2k
ACODE,ASTER
love my projuct

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.5k
Basic pagination

Freja Jensen

3 years ago

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

Abhiraj

1 year ago

2.5k
Clean Pagination

Anonymous

1 year ago

1.9k
Employee table
Modern Unique and responsive table layout

Rajesh Maheshwari

1 year ago

3.6k
MULTI-STEP FORM component
MULTI-STEP FORM WIZARD · Open Source Component Steps: Personal → Role → Preferences → Goals → Review Features: stepper, validation, conditional fields, localStorage, animated transitions, review summary

Ijila Itunu

6 months ago

479