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

552

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

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

Author:
Code Master(Mfuranziza Dusabe Hamza)

1 month ago

195
Pagination with active page indicator

Author:
Leif99

2 years ago

13k
Pagination

Author:
Anonymous

1 year ago

1.4k
chat ui advanced
Professional chat ui, connect me for jsx https://abhirajk.vercel.app/

Author:
Abhiraj

9 months ago

1.4k
Button group

Author:
Conan Hilton

3 years ago

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

5 months ago

744
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.2k
Back and next navigation buttons

Author:
Fagundo67

2 years ago

11.9k
ACODE,ASTER
love my projuct

Author:
Code Master(Mfuranziza Dusabe Hamza)

5 months ago

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

Author:
Sufyan jutt

1 week ago

21
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

2.1k
Content Discovery Platform with Search & Filter
A modern, responsive web application built with Tailwind CSS that showcases content cards with search and filter functionality.

Author:
Sufyan jutt

3 days ago

37

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components