BetaCodophile is currently in active development. Features may change rapidly! 🚀
Back to Tailwind

Pagination

Customize navigation links with Tailwind utility classes.

Layout & Style

Size & Spacing

2

Appearance

Alignment

JSX / HTML Output
<nav aria-label="Pagination"> <ul className="flex list-none p-0 m-0 justify-center gap-2"> <li> <a href="#" className="block text-white no-underline px-4 py-2 text-base border border-transparent rounded transition-all duration-300 hover:bg-white/10">Previous</a> </li> <li> <a href="#" className="block text-white no-underline px-4 py-2 text-base border border-transparent rounded transition-all duration-300 hover:bg-white/10">1</a> </li> <li> <a href="#" className="block text-white no-underline px-4 py-2 text-base border border-transparent rounded transition-all duration-300 bg-cyan-500 border-cyan-500" aria-current="page">2</a> </li> <li> <a href="#" className="block text-white no-underline px-4 py-2 text-base border border-transparent rounded transition-all duration-300 hover:bg-white/10">3</a> </li> <li> <a href="#" className="block text-white no-underline px-4 py-2 text-base border border-transparent rounded transition-all duration-300 hover:bg-white/10">Next</a> </li> </ul> </nav>