Simple Pagination

This tailwind example is contributed by Manuela Bianka, on 25-Sep-2022. Component is made with Tailwind v3.4.

Button Pagination

Author Manuela Bianka

Tailwind v3.4 12.6k 13

Fork Fullscreen

<ol class="flex justify-center text-xs font-medium space-x-1">
  <li>
    <a href="/?page=1" class="inline-flex items-center justify-center w-8 h-8 border border-gray-100 rounded">
      <svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3" viewBox="0 0 20 20" fill="currentColor">
        <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
      </svg>
    </a>
  </li>

<li>
    <a href="/?page=1" class="block w-8 h-8 text-center border border-gray-100 rounded leading-8"> 1 </a>
  </li>

<li class="block w-8 h-8 text-center text-white bg-blue-600 border-blue-600 rounded leading-8">2</li>

<li>
    <a href="/?page=3" class="block w-8 h-8 text-center border border-gray-100 rounded leading-8"> 3 </a>
  </li>

<li>
    <a href="/?page=4" class="block w-8 h-8 text-center border border-gray-100 rounded leading-8"> 4 </a>
  </li>

<li>
    <a href="/?page=3" class="inline-flex items-center justify-center w-8 h-8 border border-gray-100 rounded">
      <svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3" viewBox="0 0 20 20" fill="currentColor">
        <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
      </svg>
    </a>
  </li>
</ol>

Related Examples

Previous Next Buttons
Pagination buttons

Alok

4 years ago

15.4k
Hamburger menu button with hover effect

_Amar_

3 years ago

18.4k
Code Editor UI
Simple code editor prototype made with HTML and TailwindCSS. A lightweight template to explore and customize.

Indra

1 year ago

1k
Boutons iOS 26
Boutons iOS 26

Omer fils ELENGA

10 months ago

823
Engineering Project Dashboard
Track engineering assignments, project progress, technology stack, and delivery timelines in one simple dashboard.

Ayyamperumal S

7 months ago

535
Listen on Spotify/Apple Music Button

Patricio Garcia

2 years ago

3.3k
Thumbs up and thumbs down buttons
Upvote downvote buttons

Prajwal Hallale

3 years ago

11.9k
Buttons with shadow

Leon Bachmann

3 years ago

13.1k
Social buttons
Mono-color Social buttons change colors according to your need

Arya

4 years ago

12.4k
Color Changing Gradient Button
Color Changing Gradient Button

EquinoX

2 years ago

4.4k
Switch tabs button

gmer33

3 years ago

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

Sufyan jutt

11 months ago

966

Browse by topic

Explore components by Tags

Jump straight to the UI pattern you need.

Footer Header Card Article Avatar FAQ Banner Blog Breadcrumb Button Call to Action Form Carousel Contact us Error page Feature Gallery Hero Input Spinner Login Modal Pagination Pricing Profile

Can't find it?

Didn't find the component you were looking for?

Search across 3,000+ community-built components and grab the code in seconds.