Source: https://tailwindcss.com/plus/ui-blocks/application-ui/navigation/pagination

• • Marketing

  • Application UI

  • Ecommerce

  • Documentation

• Application Shells

  • Stacked Layouts

  • Sidebar Layouts

  • Multi-Column Layouts

• Headings

  • Page Headings

  • Card Headings

  • Section Headings

• Data Display

  • Description Lists

  • Stats

  • Calendars

• Lists

  • Stacked Lists

  • Tables

  • Grid Lists

  • Feeds

• Forms

  • Form Layouts

  • Input Groups

  • Select Menus

  • Sign-in and Registration

  • Textareas

  • Radio Groups

  • Checkboxes

  • Toggles

  • Action Panels

  • Comboboxes

• Feedback

  • Alerts

  • Empty States

• Navigation

  • Navbars

  • Pagination

  • Tabs

  • Vertical Navigation

  • Sidebar Navigation

  • Breadcrumbs

  • Progress Bars

  • Command Palettes

• Overlays

  • Modal Dialogs

  • Drawers

  • Notifications

• Elements

  • Avatars

  • Badges

  • Dropdowns

  • Buttons

  • Button Groups

• Layout

  • Containers

  • Cards

  • List containers

  • Media Objects

  • Dividers

• Page Examples

  • Home Screens

  • Detail Screens

  • Settings Screens

5-day Mini-Course

Build UIs that don’t suck.

Short, tactical video lessons from the creator of Tailwind CSS, delivered directly to your inbox every day for a week.

Get the free course

Pagination

Use these Tailwind CSS pagination components to add page navigation controls to your application's resource pages, featuring page numbers, next/previous buttons, and ellipses for handling large amounts of pages. These components are designed and built by the Tailwind CSS team, and include a variety of different styles and layouts.

Card footer with page buttons

---

PreviewCode

HTMLReactVue

Card footer with page buttons

---

PreviewCode

HTMLReactVue

Centered page numbers

---

Preview

Get the code →

Centered page numbers

---

Preview

Get the code →

Simple card footer

---

Preview

Get the code →

Simple card footer

---

Preview

Get the code →