Home
Htmlwind
Pagination - Htmlwind

Pagination - Htmlwind

Centered numbers pagination

This tailwind example is contributed by Htmlwind, on 02-Jun-2025. Component is made with Tailwind CSS v3. It is responsive.

Pagination

Author Htmlwind

328

Fork Fullscreen

<div class="bg-white py-8">
  <div class="mx-auto max-w-7xl px-6 lg:px-8">
    <nav class="flex border-t border-gray-200 pt-4 md:pt-5" aria-label="Pagination">
      <div class="flex flex-1 items-center">
        <a href="#" class="flex items-center gap-x-1.5 text-sm font-semibold text-gray-500 hover:text-gray-700">
          <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <path d="M15 6L9 12L15 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
          Previous
        </a>
      </div>
      <div class="hidden md:flex md:items-center md:gap-x-0.5">
        <a href="#" aria-current="page" class="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-pink-500 text-sm font-medium text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">1</a>
        <a href="#" class="inline-flex h-10 w-10 items-center justify-center rounded-lg text-sm font-medium text-gray-500 hover:bg-gray-50 hover:text-gray-700">2</a>
        <a href="#" class="inline-flex h-10 w-10 items-center justify-center rounded-lg text-sm font-medium text-gray-500 hover:bg-gray-50 hover:text-gray-700">3</a>
        <span class="inline-flex h-10 w-10 items-center justify-center text-sm font-medium text-gray-500">...</span>
        <a href="#" class="inline-flex h-10 w-10 items-center justify-center rounded-lg text-sm font-medium text-gray-500 hover:bg-gray-50 hover:text-gray-700">8</a>
        <a href="#" class="inline-flex h-10 w-10 items-center justify-center rounded-lg text-sm font-medium text-gray-500 hover:bg-gray-50 hover:text-gray-700">9</a>
        <a href="#" class="inline-flex h-10 w-10 items-center justify-center rounded-lg text-sm font-medium text-gray-500 hover:bg-gray-50 hover:text-gray-700">10</a>
      </div>
      <div class="flex flex-1 items-center justify-end">
        <a href="#" class="flex items-center gap-x-1.5 text-sm font-semibold text-gray-500 hover:text-gray-700">
          Next
          <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <path d="M9 6L15 12L9 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </a>
      </div>
    </nav>
  </div>
</div>

Related Examples

Back and next navigation buttons

Author:
Fagundo67

2 years ago

11.5k
Pagination

Author:
Leon Bachmann

2 years ago

10k
Pagination

Author:
Lîmåã M

2 years ago

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

3 months ago

631
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)

3 months ago

949
Pagination

Author:
Anonymous

11 months ago

1.2k
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:
Bogdan Galin

2 years ago

8.1k
Pagination round buttons

Author:
Livia Flores

2 years ago

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

Author:
Code Master(Mfuranziza Dusabe Hamza)

3 months ago

620
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.4k
Employee table
Modern Unique and responsive table layout

Author:
Rajesh Maheshwari

6 months ago

1.6k
Pagination
Pagination with total page and current page.

Author:
Alok

2 years ago

10.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components