Tailwind Pagination Components in Vendia library

Framework

UI Library

7-Day Pass

Full Shuffle Editor access for just $10

Great for quick projects and for testing everything Shuffle can do. One-time payment, not a subscription.

New to Shuffle? Try our tools:

Multi-AI Designer Kick off several design directions at once, then build on your favorite. Visual Editor Build from UI components and templates, then customize every detail.

Components

Pagination from Vendia

Tailwind CSS

Vendia

<section x-data="{ active: 1 }" class="py-12 bg-black">
  <div class="container mx-auto px-4">
    <nav>
      <ul class="flex items-center justify-center">
        <li class="mr-5"><a x-ref="page1" x-on:click.prevent="active = $refs.page1.textContent" :class="{'text-black bg-gradient-to-br from-yellow-500 via-green-300 to-blue-500': $refs.page1.textContent == active, 'text-white hover:text-black hover:bg-yellow-300': $refs.page1.textContent != active }" class="inline-flex items-center h-6 px-2 text-sm text-black bg-gradient-to-br from-yellow-500 via-green-300 to-blue-500 font-bold" href="#">1</a></li>
        <li class="mr-5"><a x-ref="page2" x-on:click.prevent="active = $refs.page2.textContent" :class="{'text-black bg-gradient-to-br from-yellow-500 via-green-300 to-blue-500': $refs.page2.textContent == active, 'text-white': $refs.page2.textContent != active }" class="inline-flex items-center h-6 px-2 text-sm text-white hover:text-black font-bold hover:bg-yellow-300" href="#">2</a></li>
        <li class="mr-5"><a x-ref="page3" x-on:click.prevent="active = $refs.page3.textContent" :class="{'text-black bg-gradient-to-br from-yellow-500 via-green-300 to-blue-500': $refs.page3.textContent == active, 'text-white': $refs.page3.textContent != active }" class="inline-flex items-center h-6 px-2 text-sm text-white hover:text-black font-bold hover:bg-yellow-300" href="#">3</a></li>
        <li class="mr-5"><a x-ref="page4" x-on:click.prevent="active = $refs.page4.textContent" :class="{'text-black bg-gradient-to-br from-yellow-500 via-green-300 to-blue-500': $refs.page4.textContent == active, 'text-white': $refs.page4.textContent != active }" class="inline-flex items-center h-6 px-2 text-sm text-white hover:text-black font-bold hover:bg-yellow-300" href="#">4</a></li>
        <li><a x-ref="page5" x-on:click.prevent="active = $refs.page5.textContent" :class="{'text-black bg-gradient-to-br from-yellow-500 via-green-300 to-blue-500': $refs.page5.textContent == active, 'text-white': $refs.page5.textContent != active }" class="inline-flex items-center h-6 px-2 text-sm text-white hover:text-black font-bold hover:bg-yellow-300" href="#">5</a></li>
      </ul>
    </nav>
  </div>
</section>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Dark Pagination Control with Gradient Active Page

A horizontal pagination bar on a black background showing page numbers 1 through 5, with the active page 1 highlighted by a green-to-blue gradient square. The control is centered and minimal, with no other visible elements.