Home
Manuela Bianka
Simple Pagination

Simple Pagination

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

Button Pagination

Author Manuela Bianka

11.8k

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

Author:
Alok

3 years ago

14.1k
Hamburger menu button with hover effect

Author:
_Amar_

2 years ago

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

Author:
Indra

2 months ago

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

5 months ago

818
Buttons variations

Author:
R.P Ketan

2 years ago

9.8k
Underline Hover Effect
Hover effect using after and before pseudo elements.

Author:
Carlos Adrian Garcia

1 year ago

9.1k
Button with hover animation

Author:
Andrew

9 months ago

2.1k
Primary and secondary button pair
Call to action buttons

Author:
Manuela Bianka

3 years ago

16.4k
Buttons examples

Author:
Manuela Bianka

2 years ago

12.4k
Button pair

Author:
Piet Vriend

2 years ago

10.8k
Button group
Add active class to clicked button using JavaScript

Author:
TailwindFlex

3 years ago

10.5k
Sign in with buttons

Author:
Simon Scheffer

2 years ago

11.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2025 TailwindFlex. All Rights Reserved.

v1.12