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

1.3k

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

Basic pagination

Author:
Sophia Baker

3 years ago

12.4k
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"

Author:
Code Master(Mfuranziza Dusabe Hamza)

8 months ago

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

Author:
Diego Chavez

2 years ago

7.8k
ACODE,ASTER
love my projuct

Author:
Code Master(Mfuranziza Dusabe Hamza)

8 months ago

727
Pagination
This is a simple pagination

Author:
Khalid

1 year ago

2.6k
Boutons iOS 26
Boutons iOS 26

Author:
Omer fils ELENGA

2 months ago

319
Pagination

Author:
Sienna

2 years ago

10.5k
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)

8 months ago

1k
ACODE MASTER — Cyberpunk Full Stack Developer from Rwanda
"I’m ACODE MASTER — a visionary Full Stack Developer from Rwanda, blending cutting-edge tech with bold design. I specialize in building modern web applications using React, Node.js, and TailwindCSS, inspired by the cyberpunk aesthetic and driven by a passion for digital innovation. Welcome to the future of code."

Author:
Code Master(Mfuranziza Dusabe Hamza)

8 months ago

1.5k
Pagination
Pagination with total page and current page.

Author:
Alok

3 years ago

11.1k
Pagination

Author:
Nishant Trivedi

2 years ago

9.9k
Basic pagination

Author:
Freja Jensen

3 years ago

13k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components