Home
Leon Bachmann
Basic pagination

Basic pagination

This tailwind example is contributed by Leon Bachmann, on 06-Feb-2023. Component is made with Tailwind CSS v3. It is responsive.

Pagination

Author Leon Bachmann

8.3k

Fork Fullscreen

<li class="text-left">
            <div class="flex items-center">
                <span class="mx-2 text-gray-400">/</span>
                <div class="-m-1">
                    <a href="#"
                        class="rounded-md p-1 text-sm font-medium text-gray-600 focus:text-gray-900 focus:shadow hover:text-gray-800">
                        Products </a>
                </div>
            </div>
        </li>

<li class="text-left">
            <div class="flex items-center">
                <span class="mx-2 text-gray-400">/</span>
                <div class="-m-1">
                    <a href="#"
                        class="rounded-md p-1 text-sm font-medium text-gray-600 focus:text-gray-900 focus:shadow hover:text-gray-800"
                        aria-current="page"> Coffee </a>
                </div>
            </div>
        </li>
    </ol>
</nav>

Related Examples

Previous and next with icons
Use the following code to show simple previous and next elements with icons. @zobaidulkazi

Author:
zobaidul kaziex

1 year ago

2k
Pagination with active page indicator

Author:
Leif99

2 years ago

13k
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.6k
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)

4 months ago

714
My Coding Journey
To transform a standard timeline into an engaging, scroll-driven narrative experience.

Author:
Code Master(Mfuranziza Dusabe Hamza)

2 weeks ago

62
Basic pagination

Author:
Sophia Baker

2 years ago

12.2k
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:
Bogdan Galin

2 years ago

8.1k
Previous Next Buttons
Pagination buttons

Author:
Alok

2 years ago

13.9k
Pagination

Author:
Lîmåã M

2 years ago

11k
Simple Pagination

Author:
Gopi Yadav

2 years ago

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

Author:
Indra

4 weeks ago

105
Clean Pagination

Author:
Anonymous

8 months ago

918

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components