Simple pagination

This tailwind example is contributed by Elijah Davis, on 02-Feb-2023. Component is made with Tailwind v3.4.

Tailwind v3.4 9.7k 9

<div class="flex justify-center items-center mt-6">
    <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
        <a href="#"
            class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
            <span class="sr-only">Previous</span>
            
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                stroke="currentColor" class="w-6 h-6">
                <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
            </svg>
        </a>
        <a href="#"
            class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">1</a>
        <a href="#"
            class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">2</a>
        <a href="#"
            class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">3</a>
        <span
            class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">...</span>
        <a href="#"
            class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">8</a>
        <a href="#"
            class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">9</a>
        <a href="#"
            class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">10</a>
        <a href="#"
            class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
            <span class="sr-only">Next</span>
            
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                stroke="currentColor" class="w-6 h-6">
                <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
            </svg>
        </a>

</nav>
</div>

Related Examples

Pagination

Leon Bachmann

3 years ago

11.6k
Pagination small
Suitable for large no of pages

Prajwal Hallale

3 years ago

7.6k
Pagination with active page indicator

Leif99

3 years ago

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

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.5k
MULTI-STEP FORM component
MULTI-STEP FORM WIZARD · Open Source Component Steps: Personal → Role → Preferences → Goals → Review Features: stepper, validation, conditional fields, localStorage, animated transitions, review summary

Ijila Itunu

5 months ago

364
Simple Pagination

Manuela Bianka

4 years ago

12.6k
Employee table
Modern Unique and responsive table layout

Anonymous

1 year ago

1.4k
Pagination
Pagination with total page and current page.

Alok

4 years ago

12.1k
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
Basic pagination

Sophia Baker

3 years ago

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

Sufyan jutt

11 months ago

966
Basic pagination

Freja Jensen

3 years ago

13.5k