Home
Anonymous
Clean Pagination

Clean Pagination

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

Pagination

Author Anonymous

919

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

AcodeMaster GameZone – Play Your Favorite Games Online
AcodeMaster GameZone is a modern gaming website where you can discover, explore, and play exciting games anytime, anywhere. Designed with smooth animations and a stylish dark theme using Tailwind CSS, it offers a fast and fun experience for every gamer.

Author:
Code Master(Mfuranziza Dusabe Hamza)

4 months ago

721
Pagination with active page indicator

Author:
Leif99

2 years ago

13k
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:
Amit Pachange

3 years ago

8.6k
Basic pagination

Author:
Freja Jensen

2 years ago

12.8k
Pagination
This is a simple pagination

Author:
Khalid

1 year ago

2.1k
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
Pagination

Author:
Sienna

2 years ago

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

Author:
Code Master(Mfuranziza Dusabe Hamza)

3 weeks ago

138
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

578
Pagination
Pagination with total page and current page.

Author:
Alok

3 years ago

10.6k
Employee table
Modern Unique and responsive table layout

Author:
Rajesh Maheshwari

7 months ago

1.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components