Pagination

This tailwind example is contributed by Anonymous, on 04-Oct-2024. Component is made with Tailwind v3.4. It is responsive.

Pagination

Author Anonymous

Tailwind v3.4 2.1k 1

Fork Fullscreen

<div class="p-4 mt-20">
  <nav class="flex items-center justify-between border-t border-gray-200 px-4 sm:px-0">
    <div class="-mt-px flex w-0 flex-1"><a
        class="inline-flex items-center border-t-2 border-transparent pt-4 pr-1 text-sm font-medium text-gray-300"
        href="/blog?page=0"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
          aria-hidden="true" class="mr-3 h-5 w-5 text-gray-300">
          <path fill-rule="evenodd"
            d="M18 10a.75.75 0 01-.75.75H4.66l2.1 1.95a.75.75 0 11-1.02 1.1l-3.5-3.25a.75.75 0 010-1.1l3.5-3.25a.75.75 0 111.02 1.1l-2.1 1.95h12.59A.75.75 0 0118 10z"
            clip-rule="evenodd"></path>
        </svg>Previous</a></div>
    <div class="hidden md:-mt-px md:flex"><a
        class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium border-violet-500 text-violet-600"
        href="/blog?page=1">1</a><a
        class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300"
        href="/blog?page=2">2</a><a
        class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300"
        href="/blog?page=3">3</a></div>
    <div class="-mt-px flex w-0 flex-1 justify-end"><a
        class="inline-flex items-center border-t-2 border-transparent pt-4 pl-1 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
        href="/blog?page=2">Next<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
          aria-hidden="true" class="ml-3 h-5 w-5 text-gray-400">
          <path fill-rule="evenodd"
            d="M2 10a.75.75 0 01.75-.75h12.59l-2.1-1.95a.75.75 0 111.02-1.1l3.5 3.25a.75.75 0 010 1.1l-3.5 3.25a.75.75 0 11-1.02-1.1l2.1-1.95H2.75A.75.75 0 012 10z"
            clip-rule="evenodd"></path>
        </svg></a></div>
  </nav>
</div>

Related Examples

Pagination - Htmlwind
Centered numbers pagination

Htmlwind

1 year ago

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

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.5k
Basic pagination

Freja Jensen

3 years ago

13.5k
Pagination

Leon Bachmann

3 years ago

11.6k
vscode a la omerlinks
vscode a la omerlinks

Omer fils ELENGA

10 months ago

648
Pagination

Nishant Trivedi

3 years ago

10.2k
Pagination with active page indicator

Leif99

3 years ago

13.9k
FLESH & BONE
Stranded in the heart of a cannibal-infested jungle, you must make unthinkable choices to survive. How far will you go to see another sunrise?

gidy

11 months ago

1.2k
Button group

Conan Hilton

4 years ago

9.8k
ACODE,ASTER
love my projuct

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.4k
Boutons iOS 26
Boutons iOS 26

Omer fils ELENGA

10 months ago

823
Pagination
Pagination with total page and current page.

Alok

4 years ago

12.1k