Clean Pagination

This tailwind example is contributed by Anonymous, on 05-Jan-2025. Component is made with Tailwind v3.4. It is responsive.

Pagination

Author Anonymous

Tailwind v3.4 1.9k 2

Fork Fullscreen

<div
  class="col-span-12 mx-auto mt-12 grid grid-cols-4 grid-rows-2 items-center gap-3 px-4 py-4 pb-8 sm:flex sm:justify-center">
  <div class="wt-button-font order-2 col-span-2 flex justify-end gap-2"><a
      class="rounded-lg flex items-center gap-2 border border-transparent px-3 py-1 transition duration-150 ease-in-out hover:border-wt-primary"
      href="/?page=1"
      style="color: rgb(3, 7, 18); border: 1px solid rgb(229, 231, 235); background-color: rgb(249, 250, 251);">First</a><a
      class="rounded-lg flex items-center gap-2 border border-transparent px-3 py-1 transition duration-150 ease-in-out hover:border-wt-primary"
      href="/?page=2"
      style="color: rgb(3, 7, 18); border: 1px solid rgb(229, 231, 235); background-color: rgb(249, 250, 251);"><svg
        xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
        aria-hidden="true" data-slot="icon" class="rotate-180 transform" height="16px">
        <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"></path>
      </svg>Back</a></div>
  <div class="order-1 col-span-4 flex justify-center gap-3 sm:order-2"><a
      class="rounded-lg flex items-center gap-2 border border-transparent px-3 py-1 transition duration-150 ease-in-out hover:border-wt-primary"
      href="/?page=1"
      style="color: rgb(3, 7, 18); border: 1px solid rgb(229, 231, 235); background-color: rgb(249, 250, 251);">1</a><a
      class="rounded-lg flex items-center gap-2 border border-transparent px-3 py-1 transition duration-150 ease-in-out hover:border-wt-primary"
      href="/?page=2"
      style="color: rgb(3, 7, 18); border: 1px solid rgb(229, 231, 235); background-color: rgb(249, 250, 251);">2</a><a
      class="rounded-lg flex items-center gap-2 border border-transparent px-3 py-1 transition duration-150 ease-in-out hover:border-wt-primary"
      href="/?page=3"
      style="color: rgb(255, 255, 255); border: 1px solid rgb(229, 231, 235); background-color: rgb(0, 0, 0);">3</a><a
      class="rounded-lg flex items-center gap-2 border border-transparent px-3 py-1 transition duration-150 ease-in-out hover:border-wt-primary"
      href="/?page=4"
      style="color: rgb(3, 7, 18); border: 1px solid rgb(229, 231, 235); background-color: rgb(249, 250, 251);">4</a><a
      class="rounded-lg flex items-center gap-2 border border-transparent px-3 py-1 transition duration-150 ease-in-out hover:border-wt-primary"
      href="/?page=5"
      style="color: rgb(3, 7, 18); border: 1px solid rgb(229, 231, 235); background-color: rgb(249, 250, 251);">5</a><a
      class="rounded-lg flex items-center gap-2 border border-transparent px-3 py-1 transition duration-150 ease-in-out hover:border-wt-primary"
      href="/?page=6"
      style="color: rgb(3, 7, 18); border: 1px solid rgb(229, 231, 235); background-color: rgb(249, 250, 251);">6</a><a
      class="rounded-lg flex items-center gap-2 border border-transparent px-3 py-1 transition duration-150 ease-in-out hover:border-wt-primary"
      href="/?page=7"
      style="color: rgb(3, 7, 18); border: 1px solid rgb(229, 231, 235); background-color: rgb(249, 250, 251);">7</a><a
      class="rounded-lg flex items-center gap-2 border border-transparent px-3 py-1 transition duration-150 ease-in-out hover:border-wt-primary"
      href="/?page=8"
      style="color: rgb(3, 7, 18); border: 1px solid rgb(229, 231, 235); background-color: rgb(249, 250, 251);">8</a>
  </div>
  <div class="wt-button-font order-2 col-span-2 flex items-center gap-2"><a
      class="rounded-lg flex items-center gap-2 border border-transparent px-3 py-1 transition duration-150 ease-in-out hover:border-wt-primary"
      href="/?page=4"
      style="color: rgb(3, 7, 18); border: 1px solid rgb(229, 231, 235); background-color: rgb(249, 250, 251);">Next
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
        aria-hidden="true" data-slot="icon" height="16px">
        <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"></path>
      </svg></a><a
      class="rounded-lg flex items-center gap-2 border border-transparent px-3 py-1 transition duration-150 ease-in-out hover:border-wt-primary"
      href="/?page=12"
      style="color: rgb(3, 7, 18); border: 1px solid rgb(229, 231, 235); background-color: rgb(249, 250, 251);">Last</a>
  </div>
</div>

Related Examples

SomaRwanda
Menya uburyo bwo kwandika ibisomwa, impuzandimi, n'imyandikire y'icyongereza mu buryo bworoshye.

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

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

Diego Chavez

3 years ago

8.7k
Pagination

Anonymous

2 years ago

2.1k
TailwindFlex – Creative Animated Home Experience
"Innovative Home with Tailwind Animated Background" "Animated Hero – TailwindFlex Design" "Smooth UI – Creative Motion with Tailwind CSS" "Home Harmony – Motion Meets Design" "TailwindFlex Home – Fluid Animation & UI"

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

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

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

791
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

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

SHARIFUL ISLAM

1 year ago

2k
Pagination
It's my first project which i made him in the using tailwind css and html

Sufyan jutt

11 months ago

966
Pagination small
Suitable for large no of pages

Prajwal Hallale

3 years ago

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

Indra

1 year ago

1k
Pagination
This is a simple pagination

Khalid

2 years ago

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

Leif99

3 years ago

12.2k