Home
Anonymous
Pagination

Pagination

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

Pagination

Author Anonymous

1.1k

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

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)

2 months ago

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

2 months ago

571
Pagination
Pagination with total page and current page.

Author:
Alok

2 years ago

10.6k
Basic pagination

Author:
Freja Jensen

2 years ago

12.7k
Simple pagination

Author:
Elijah Davis

2 years ago

8.5k
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

5 months ago

442
ACODE,ASTER
love my projuct

Author:
Code Master(Mfuranziza Dusabe Hamza)

2 months ago

351
Employee table
Modern Unique and responsive table layout

Author:
Rajesh Maheshwari

5 months ago

1.2k
Pagination

Author:
Leon Bachmann

2 years ago

9.8k
Pagination

Author:
Lîmåã M

2 years ago

10.8k
Pagination with active page indicator

Author:
Leif99

2 years ago

12.8k
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.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components