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

Pagination round buttons

Livia Flores

3 years ago

12.6k
Simple Pagination

Gopi Yadav

3 years ago

10.7k
Pagination with active page indicator

Leif99

3 years ago

13.9k
Simple Pagination

Manuela Bianka

4 years ago

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

5 months ago

596
Employee table
Modern Unique and responsive table layout

Rajesh Maheshwari

1 year ago

3.5k
Employee table
Modern Unique and responsive table layout

Anonymous

1 year ago

1.4k
Button group

Conan Hilton

4 years ago

9.8k
The Free AI Tools Grid Section (210+ Tools, No Signup)
A responsive and SEO-optimized grid section showcasing over 210 free AI tools. Designed with Tailwind CSS, fully responsive, fast-loading, and built for high user engagement. No sign-up required, privacy-friendly, and optimized for performance and discoverability.https://www.thefreeaitools.com/

Achraf Testq

6 months ago

630
Previous Next Buttons
Pagination buttons

Alok

4 years ago

15.4k
Basic pagination

Sophia Baker

3 years ago

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

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

791