Components

Tailwind CSS Pagination

Entire information is divided into pages by pagination, which also gives numbers. Here, by separating several articles or web pages, it makes it simpler to navigate through a lot of content which allows for easy content switching. Site visitors can navigate through web information by using web links for pagination.

image

The indexing of different website pages on the homepage using Tailwind CSS pagination is a pretty excellent strategy. Your website needs to have some pagination added when it has a lot of pages. There are various styles offered by tailwind css for pagination. Following are a few of them.

1000+ Tailwind Blocks

Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.

Explore More

Default pagination

By using tailwind css utility classes this simple tailwind pagination example can be made which carries page numbers and previous and next buttons is the most common pagination which lets people navigate through pages easily.

<nav class="flex items-center gap-x-4 min-w-max">
<a class="text-gray-500 hover:text-gray-900 p-4 inline-flex items-center md:mr-8 mr-1" href="javascript:;">
   <span>Back</span>
</a>
<a class="w-10 h-10  bg-transparent text-gray-500 p-2 inline-flex items-center justify-center rounded-full transition-all duration-150 hover:text-indigo-600" href="javascript:;" aria-current="page">1</a>
<a class="w-10 h-10 bg-indigo-600 text-white p-2 inline-flex items-center justify-center rounded-full transition-all duration-150 hover:bg-indigo-600 hover:text-white" href="javascript:;">2</a>
<a class="w-10 h-10 bg-transparent text-gray-500 p-2 inline-flex items-center justify-center rounded-full transition-all duration-150 hover:text-indigo-600" href="javascript:;">3</a>
<a class="w-10 h-10 bg-transparent text-gray-500 p-2 inline-flex items-center justify-center rounded-full transition-all duration-150 hover:text-indigo-600" href="javascript:;">4</a>
<a class="w-10 h-10 bg-transparent text-gray-500 p-2 inline-flex items-center justify-center rounded-full transition-all duration-150 hover:text-indigo-600" href="javascript:;">...</a>
<a class="w-10 h-10 bg-transparent text-gray-500 p-2 inline-flex items-center justify-center rounded-full transition-all duration-150 hover:text-indigo-600" href="javascript:;">10</a>
<a class="text-gray-500 hover:text-gray-900 p-4 inline-flex items-center md:ml-8 ml-1" href="javascript:;">
   <span>Next</span>
</a>
</nav>
<nav class="flex items-center gap-x-4 min-w-max">
<a class="text-gray-500 hover:text-gray-900 p-4 inline-flex items-center md:mr-8 mr-1" href="javascript:;">
   <span>Back</span>
</a>
<a class="w-10 h-10 text-gray-500 p-2 inline-flex items-center justify-center border border-gray-200 bg-gray-50 rounded-full transition-all duration-150 hover:text-indigo-900 hover:border-indigo-600 hover:bg-indigo-50" href="javascript:;" aria-current="page">1</a>
<a class="w-10 h-10 bg-indigo-600 text-white p-2 inline-flex items-center justify-center rounded-full transition-all duration-150 hover:bg-indigo-600 hover:text-white" href="javascript:;">2</a>
<a class="w-10 h-10 text-gray-500 p-2 inline-flex items-center justify-center border border-gray-200 bg-gray-50 rounded-full transition-all duration-150 hover:text-indigo-900 hover:border-indigo-600 hover:bg-indigo-50" href="javascript:;">3</a>
<a class="w-10 h-10 text-gray-500 p-2 inline-flex items-center justify-center border border-gray-200 bg-gray-50 rounded-full transition-all duration-150 hover:text-indigo-900 hover:border-indigo-600 hover:bg-indigo-50" href="javascript:;">4</a>
<a class="w-10 h-10 text-gray-500 p-2 inline-flex items-center justify-center border border-gray-200 bg-gray-50 rounded-full transition-all duration-150 hover:text-indigo-900 hover:border-indigo-600 hover:bg-indigo-50" href="javascript:;">...</a>
<a class="w-10 h-10 text-gray-500 p-2 inline-flex items-center justify-center border border-gray-200 bg-gray-50 rounded-full transition-all duration-150 hover:text-indigo-900 hover:border-indigo-600 hover:bg-indigo-50" href="javascript:;">10</a>
<a class="text-gray-500 hover:text-gray-900 p-4 inline-flex items-center md:ml-8 ml-1" href="javascript:;">
   <span>Next</span>
</a>
</nav>
<nav class="flex items-center gap-x-4 min-w-max">
<a class="text-gray-500 hover:text-gray-900 p-4 inline-flex items-center md:mr-8 mr-1" href="javascript:;">
   <span>Back</span>
</a>
<a class="w-10 h-10 text-gray-500 p-2 inline-flex items-center justify-center border border-gray-200 rounded-full transition-all duration-150 hover:text-indigo-900 hover:border-indigo-600 " href="javascript:;" aria-current="page">1</a>
<a class="w-10 h-10 bg-indigo-600 text-white p-2 inline-flex items-center justify-center rounded-full transition-all duration-150 hover:bg-indigo-600 hover:text-white" href="javascript:;">2</a>
<a class="w-10 h-10 text-gray-500 p-2 inline-flex items-center justify-center border border-gray-200 rounded-full transition-all duration-150 hover:text-indigo-900 hover:border-indigo-600 " href="javascript:;">3</a>
<a class="w-10 h-10 text-gray-500 p-2 inline-flex items-center justify-center border border-gray-200 rounded-full transition-all duration-150 hover:text-indigo-900 hover:border-indigo-600 " href="javascript:;">4</a>
<a class="w-10 h-10 text-gray-500 p-2 inline-flex items-center justify-center border border-gray-200 rounded-full transition-all duration-150 hover:text-indigo-900 hover:border-indigo-600 " href="javascript:;">...</a>
<a class="w-10 h-10 text-gray-500 p-2 inline-flex items-center justify-center border border-gray-200 rounded-full transition-all duration-150 hover:text-indigo-900 hover:border-indigo-600 " href="javascript:;">10</a>
<a class="text-gray-500 hover:text-gray-900 p-4 inline-flex items-center md:ml-8 ml-1" href="javascript:;">
   <span>Next</span>
</a>
</nav>
<nav class="flex items-center gap-x-4 min-w-max">
<a class="text-gray-500 hover:text-gray-900 p-4 inline-flex items-center md:mr-8 mr-1" href="javascript:;">
   <span>Back</span>
</a>
<a class="w-10 h-10 text-gray-500 p-2 inline-flex items-center justify-center bg-gray-100 rounded-full transition-all duration-150 hover:bg-indigo-50 hover:text-gray-900 " href="javascript:;" aria-current="page">1</a>
<a class="w-10 h-10 bg-indigo-600 text-white p-2 inline-flex items-center justify-center rounded-full transition-all duration-150 hover:bg-indigo-600 hover:text-white" href="javascript:;">2</a>
<a class="w-10 h-10 text-gray-500 p-2 inline-flex items-center justify-center bg-gray-100 rounded-full transition-all duration-150 hover:bg-indigo-50 hover:text-gray-900 " href="javascript:;">3</a>
<a class="w-10 h-10 text-gray-500 p-2 inline-flex items-center justify-center bg-gray-100 rounded-full transition-all duration-150 hover:bg-indigo-50 hover:text-gray-900 " href="javascript:;">4</a>
<a class="w-10 h-10 text-gray-500 p-2 inline-flex items-center justify-center bg-gray-100 rounded-full transition-all duration-150 hover:bg-indigo-50 hover:text-gray-900 " href="javascript:;">...</a>
<a class="w-10 h-10 text-gray-500 p-2 inline-flex items-center justify-center bg-gray-100 rounded-full transition-all duration-150 hover:bg-indigo-50 hover:text-gray-900 " href="javascript:;">10</a>
<a class="text-gray-500 hover:text-gray-900 p-4 inline-flex items-center md:ml-8 ml-1" href="javascript:;">
   <span>Next</span>
</a>
</nav>

Pagination with icon

Tailwind pagination component with icons will have previous and next buttons with svg icons of next and previous arrow signed icons instead of text.

<nav class="flex items-center gap-x-4 min-w-max">
<a class="text-gray-500 hover:text-gray-900 p-2 inline-flex items-center md:mr-8 mr-1" href="javascript:;">
    <span class="w-10 h-10 rounded-full transition-all duration-150 flex justify-center items-center hover:border hover:border-gray-200">
        <svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M5.5 1L1.91421 4.58578C1.24755 5.25245 0.914213 5.58579 0.914213 6C0.914213 6.41421 1.24755 6.74755 1.91421 7.41421L5.5 11" stroke="#4F46E5" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" />
        </svg>
    </span>
</a>
<a class="w-10 h-10  bg-transparent text-gray-500 p-2 justify-center inline-flex items-center rounded-full transition-all duration-150 hover:text-indigo-600" href="javascript:;" aria-current="page">1</a>
<a class="w-10 h-10 bg-indigo-600 text-white p-2 justify-center inline-flex items-center rounded-full transition-all duration-150 hover:bg-indigo-600 hover:text-white" href="javascript:;">2</a>
<a class="w-10 h-10 bg-transparent text-gray-500 p-2 justify-center inline-flex items-center rounded-full transition-all duration-150 hover:text-indigo-600" href="javascript:;">3</a>
<a class="w-10 h-10 bg-transparent text-gray-500 p-2 justify-center inline-flex items-center rounded-full transition-all duration-150 hover:text-indigo-600" href="javascript:;">4</a>
<a class="w-10 h-10 bg-transparent text-gray-500 p-2 justify-center inline-flex items-center rounded-full transition-all duration-150 hover:text-indigo-600" href="javascript:;">...</a>
<a class="w-10 h-10 bg-transparent text-gray-500 p-2 justify-center inline-flex items-center rounded-full transition-all duration-150 hover:text-indigo-600" href="javascript:;">10</a>
<a class="text-gray-500 hover:text-gray-900 p-2 inline-flex items-center md:ml-8 ml-1" href="javascript:;">
    <span class="w-10 h-10 rounded-full transition-all duration-150 flex justify-center items-center hover:border hover:border-gray-200">
        <svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M1.5 11L5.08578 7.41421C5.75245 6.74755 6.08579 6.41421 6.08579 6C6.08579 5.58579 5.75245 5.25245 5.08579 4.58579L1.5 1" stroke="#4F46E5" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" />
        </svg>
    </span>
</a>
</nav>
<nav class="flex items-center gap-x-4 min-w-max">
<a class="text-gray-500 hover:text-gray-900 p-2 inline-flex items-center md:mr-8 mr-1" href="javascript:;">
    <span class="w-10 h-10 rounded-full transition-all duration-150 flex justify-center items-center hover:border hover:border-indigo-600 hover:bg-indigo-50">
        <svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M5.5 1L1.91421 4.58578C1.24755 5.25245 0.914213 5.58579 0.914213 6C0.914213 6.41421 1.24755 6.74755 1.91421 7.41421L5.5 11" stroke="#4F46E5" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
    </span>
</a>
<a class="w-10 h-10 text-gray-500 p-2 inline-flex items-center justify-center border border-gray-200 bg-gray-50 rounded-full transition-all duration-150 hover:text-indigo-900 hover:border-indigo-600 hover:bg-indigo-50" href="javascript:;" aria-current="page">1</a>
<a class="w-10 h-10 bg-indigo-600 text-white p-2 inline-flex items-center justify-center rounded-full transition-all duration-150 hover:bg-indigo-600 hover:text-white" href="javascript:;">2</a>
<a class="w-10 h-10 text-gray-500 p-2 inline-flex items-center justify-center border border-gray-200 bg-gray-50 rounded-full transition-all duration-150 hover:text-indigo-900 hover:border-indigo-600 hover:bg-indigo-50" href="javascript:;">3</a>
<a class="w-10 h-10 text-gray-500 p-2 inline-flex items-center justify-center border border-gray-200 bg-gray-50 rounded-full transition-all duration-150 hover:text-indigo-900 hover:border-indigo-600 hover:bg-indigo-50" href="javascript:;">4</a>
<a class="w-10 h-10 text-gray-500 p-2 inline-flex items-center justify-center border border-gray-200 bg-gray-50 rounded-full transition-all duration-150 hover:text-indigo-900 hover:border-indigo-600 hover:bg-indigo-50" href="javascript:;">...</a>
<a class="w-10 h-10 text-gray-500 p-2 inline-flex items-center justify-center border border-gray-200 bg-gray-50 rounded-full transition-all duration-150 hover:text-indigo-900 hover:border-indigo-600 hover:bg-indigo-50" href="javascript:;">10</a>
<a class="text-gray-500 hover:text-gray-900 p-2 inline-flex items-center md:ml-8 ml-1" href="javascript:;">
    <span class="w-10 h-10 rounded-full transition-all duration-150 flex justify-center items-center hover:border hover:border-indigo-600 hover:bg-indigo-50">
        <svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M1.5 11L5.08578 7.41421C5.75245 6.74755 6.08579 6.41421 6.08579 6C6.08579 5.58579 5.75245 5.25245 5.08579 4.58579L1.5 1" stroke="#4F46E5" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" />
        </svg>
    </span>
</a>
</nav>
<nav class="flex items-center gap-x-4 min-w-max">
<a class="text-gray-500 hover:text-gray-900 p-2 inline-flex items-center md:mr-8 mr-1" href="javascript:;">
    <span class="w-10 h-10 rounded-full transition-all duration-150 flex justify-center items-center hover:border hover:border-indigo-600">
        <svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M5.5 1L1.91421 4.58578C1.24755 5.25245 0.914213 5.58579 0.914213 6C0.914213 6.41421 1.24755 6.74755 1.91421 7.41421L5.5 11" stroke="#4F46E5" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
    </span>
</a>
<a class="w-10 h-10 text-gray-500 p-2 inline-flex items-center justify-center border border-gray-200 rounded-full transition-all duration-150 hover:text-indigo-900 hover:border-indigo-600 " href="javascript:;" aria-current="page">1</a>
<a class="w-10 h-10 bg-indigo-600 text-white p-2 inline-flex items-center justify-center rounded-full transition-all duration-150 hover:bg-indigo-600 hover:text-white" href="javascript:;">2</a>
<a class="w-10 h-10 text-gray-500 p-2 inline-flex items-center justify-center border border-gray-200 rounded-full transition-all duration-150 hover:text-indigo-900 hover:border-indigo-600 " href="javascript:;">3</a>
<a class="w-10 h-10 text-gray-500 p-2 inline-flex items-center justify-center border border-gray-200 rounded-full transition-all duration-150 hover:text-indigo-900 hover:border-indigo-600 " href="javascript:;">4</a>
<a class="w-10 h-10 text-gray-500 p-2 inline-flex items-center justify-center border border-gray-200 rounded-full transition-all duration-150 hover:text-indigo-900 hover:border-indigo-600 " href="javascript:;">...</a>
<a class="w-10 h-10 text-gray-500 p-2 inline-flex items-center justify-center border border-gray-200 rounded-full transition-all duration-150 hover:text-indigo-900 hover:border-indigo-600 " href="javascript:;">10</a>
<a class="text-gray-500 hover:text-gray-900 p-2 inline-flex items-center md:ml-8 ml-1" href="javascript:;">
    <span class="w-10 h-10 rounded-full transition-all duration-150 flex justify-center items-center hover:border hover:border-indigo-600 ">
        <svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M1.5 11L5.08578 7.41421C5.75245 6.74755 6.08579 6.41421 6.08579 6C6.08579 5.58579 5.75245 5.25245 5.08579 4.58579L1.5 1" stroke="#4F46E5" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
    </span>
</a>
</nav>
<nav class="flex items-center gap-x-4 min-w-max">
<a class="text-gray-500 hover:text-gray-900 p-2 inline-flex items-center md:mr-8 mr-1" href="javascript:;">
    <span class="w-10 h-10 rounded-full transition-all duration-150 flex justify-center items-center hover:bg-indigo-50 ">
        <svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M5.5 1L1.91421 4.58578C1.24755 5.25245 0.914213 5.58579 0.914213 6C0.914213 6.41421 1.24755 6.74755 1.91421 7.41421L5.5 11" stroke="#4F46E5" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
    </span>
</a>
<a class="w-10 h-10 text-gray-500 p-2 inline-flex items-center justify-center bg-gray-100 rounded-full transition-all duration-150 hover:bg-indigo-50 hover:text-gray-900 " href="javascript:;" aria-current="page">1</a>
<a class="w-10 h-10 bg-indigo-600 text-white p-2 inline-flex items-center justify-center rounded-full transition-all duration-150 hover:bg-indigo-600 hover:text-white" href="javascript:;">2</a>
<a class="w-10 h-10 text-gray-500 p-2 inline-flex items-center justify-center bg-gray-100 rounded-full transition-all duration-150 hover:bg-indigo-50 hover:text-gray-900 " href="javascript:;">3</a>
<a class="w-10 h-10 text-gray-500 p-2 inline-flex items-center justify-center bg-gray-100 rounded-full transition-all duration-150 hover:bg-indigo-50 hover:text-gray-900 " href="javascript:;">4</a>
<a class="w-10 h-10 text-gray-500 p-2 inline-flex items-center justify-center bg-gray-100 rounded-full transition-all duration-150 hover:bg-indigo-50 hover:text-gray-900 " href="javascript:;">...</a>
<a class="w-10 h-10 text-gray-500 p-2 inline-flex items-center justify-center bg-gray-100 rounded-full transition-all duration-150 hover:bg-indigo-50 hover:text-gray-900 " href="javascript:;">10</a>
<a class="text-gray-500 hover:text-gray-900 p-2 inline-flex items-center md:ml-8 ml-1" href="javascript:;">
    <span class="w-10 h-10 rounded-full transition-all duration-150 flex justify-center items-center  hover:bg-indigo-50 ">
        <svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M1.5 11L5.08578 7.41421C5.75245 6.74755 6.08579 6.41421 6.08579 6C6.08579 5.58579 5.75245 5.25245 5.08579 4.58579L1.5 1" stroke="#4F46E5" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
    </span>
</a>
</nav>

Back and next with icons

This one is like the previous style only but it will have next and previous icons as well alongside buttons.

<nav class="flex items-center md:gap-x-4 gap-x-2 min-w-max">
<a class="text-gray-500 hover:text-gray-900 p-4 inline-flex items-center md:mr-8 mr-1" href="javascript:;">
   <svg class="w-1.5 h-3 mr-3" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path d="M5.5 1L1.91421 4.58578C1.24755 5.25245 0.914213 5.58579 0.914213 6C0.914213 6.41421 1.24755 6.74755 1.91421 7.41421L5.5 11" stroke="#4F46E5" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" />
 </svg>
<span>Back</span>
 </a>
 <a class="w-10 h-10  bg-transparent text-gray-500 p-2 justify-center inline-flex items-center rounded-full transition-all duration-150 hover:text-indigo-600" href="javascript:;" aria-current="page">1</a>
 <a class="w-10 h-10 bg-indigo-600 text-white p-2 justify-center inline-flex items-center rounded-full transition-all duration-150 hover:bg-indigo-600 hover:text-white" href="javascript:;">2</a>
 <a class="w-10 h-10 bg-transparent text-gray-500 p-2 justify-center inline-flex items-center rounded-full transition-all duration-150 hover:text-indigo-600" href="javascript:;">3</a>
 <a class="w-10 h-10 bg-transparent text-gray-500 p-2 justify-center inline-flex items-center rounded-full transition-all duration-150 hover:text-indigo-600" href="javascript:;">4</a>
 <a class="w-10 h-10 bg-transparent text-gray-500 p-2 justify-center inline-flex items-center rounded-full transition-all duration-150 hover:text-indigo-600" href="javascript:;">...</a>
 <a class="w-10 h-10 bg-transparent text-gray-500 p-2 justify-center inline-flex items-center rounded-full transition-all duration-150 hover:text-indigo-600" href="javascript:;">10</a>
 <a class="text-gray-500 hover:text-gray-900 p-2 justify-center inline-flex items-center md:ml-8 ml-1" href="javascript:;">
     <span>Next</span>
     <svg class="w-1.5 h-3 ml-3" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M1.5 11L5.08578 7.41421C5.75245 6.74755 6.08579 6.41421 6.08579 6C6.08579 5.58579 5.75245 5.25245 5.08579 4.58579L1.5 1" stroke="#4F46E5" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" />
     </svg>
 </a>
</nav>
<nav class="flex items-center md:gap-x-4 gap-x-2 min-w-max">
 <a class="text-gray-500 hover:text-gray-900 p-4 inline-flex items-center md:mr-8 mr-1" href="javascript:;">
     <svg class="w-1.5 h-3 mr-3" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M5.5 1L1.91421 4.58578C1.24755 5.25245 0.914213 5.58579 0.914213 6C0.914213 6.41421 1.24755 6.74755 1.91421 7.41421L5.5 11" stroke="#4F46E5" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" />
     </svg>
     <span>Back</span>
 </a>
 <a class="w-10 h-10 text-gray-500 p-2 inline-flex items-center justify-center border border-gray-200 bg-gray-50 rounded-full transition-all duration-150 hover:text-indigo-900 hover:border-indigo-600 hover:bg-indigo-50" href="javascript:;" aria-current="page">1</a>
 <a class="w-10 h-10 bg-indigo-600 text-white p-2 inline-flex items-center justify-center rounded-full transition-all duration-150 hover:bg-indigo-600 hover:text-white" href="javascript:;">2</a>
 <a class="w-10 h-10 text-gray-500 p-2 inline-flex items-center justify-center border border-gray-200 bg-gray-50 rounded-full transition-all duration-150 hover:text-indigo-900 hover:border-indigo-600 hover:bg-indigo-50" href="javascript:;">3</a>
 <a class="w-10 h-10 text-gray-500 p-2 inline-flex items-center justify-center border border-gray-200 bg-gray-50 rounded-full transition-all duration-150 hover:text-indigo-900 hover:border-indigo-600 hover:bg-indigo-50" href="javascript:;">4</a>
 <a class="w-10 h-10 text-gray-500 p-2 inline-flex items-center justify-center border border-gray-200 bg-gray-50 rounded-full transition-all duration-150 hover:text-indigo-900 hover:border-indigo-600 hover:bg-indigo-50" href="javascript:;">...</a>
 <a class="w-10 h-10 text-gray-500 p-2 inline-flex items-center justify-center border border-gray-200 bg-gray-50 rounded-full transition-all duration-150 hover:text-indigo-900 hover:border-indigo-600 hover:bg-indigo-50" href="javascript:;">10</a>
 <a class="text-gray-500 hover:text-gray-900 p-4 inline-flex items-center md:ml-8 ml-1" href="javascript:;">
     <span>Next</span>
     <svg class="w-1.5 h-3 ml-3" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M1.5 11L5.08578 7.41421C5.75245 6.74755 6.08579 6.41421 6.08579 6C6.08579 5.58579 5.75245 5.25245 5.08579 4.58579L1.5 1" stroke="#4F46E5" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" />
     </svg>
 </a>
</nav>
<nav class="flex items-center md:gap-x-4 gap-x-2 min-w-max">
 <a class="text-gray-500 hover:text-gray-900 p-4 inline-flex items-center md:mr-8 mr-1" href="javascript:;">
     <svg class="w-1.5 h-3 mr-3" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M5.5 1L1.91421 4.58578C1.24755 5.25245 0.914213 5.58579 0.914213 6C0.914213 6.41421 1.24755 6.74755 1.91421 7.41421L5.5 11" stroke="#4F46E5" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" />
     </svg>
     <span>Back</span>
 </a>
 <a class="w-10 h-10 text-gray-500 p-2 inline-flex items-center justify-center border border-gray-200 rounded-full transition-all duration-150 hover:text-indigo-900 hover:border-indigo-600 " href="javascript:;" aria-current="page">1</a>
 <a class="w-10 h-10 bg-indigo-600 text-white p-2 inline-flex items-center justify-center rounded-full transition-all duration-150 hover:bg-indigo-600 hover:text-white" href="javascript:;">2</a>
 <a class="w-10 h-10 text-gray-500 p-2 inline-flex items-center justify-center border border-gray-200 rounded-full transition-all duration-150 hover:text-indigo-900 hover:border-indigo-600 " href="javascript:;">3</a>
 <a class="w-10 h-10 text-gray-500 p-2 inline-flex items-center justify-center border border-gray-200 rounded-full transition-all duration-150 hover:text-indigo-900 hover:border-indigo-600 " href="javascript:;">4</a>
 <a class="w-10 h-10 text-gray-500 p-2 inline-flex items-center justify-center border border-gray-200 rounded-full transition-all duration-150 hover:text-indigo-900 hover:border-indigo-600 " href="javascript:;">...</a>
 <a class="w-10 h-10 text-gray-500 p-2 inline-flex items-center justify-center border border-gray-200 rounded-full transition-all duration-150 hover:text-indigo-900 hover:border-indigo-600 " href="javascript:;">10</a>
 <a class="text-gray-500 hover:text-gray-900 p-4 inline-flex items-center md:ml-8 ml-1" href="javascript:;">
     <span>Next</span>
     <svg class="w-1.5 h-3 ml-3" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M1.5 11L5.08578 7.41421C5.75245 6.74755 6.08579 6.41421 6.08579 6C6.08579 5.58579 5.75245 5.25245 5.08579 4.58579L1.5 1" stroke="#4F46E5" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" />
     </svg>
 </a>
</nav>
<nav class="flex items-center md:gap-x-4 gap-x-2 min-w-max">
 <a class="text-gray-500 hover:text-gray-900 p-4 inline-flex items-center md:mr-8 mr-1" href="javascript:;">
     <svg class="w-1.5 h-3 mr-3" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M5.5 1L1.91421 4.58578C1.24755 5.25245 0.914213 5.58579 0.914213 6C0.914213 6.41421 1.24755 6.74755 1.91421 7.41421L5.5 11" stroke="#4F46E5" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" />
     </svg>
     <span>Back</span>
 </a>
 <a class="w-10 h-10 text-gray-500 p-2 inline-flex items-center justify-center bg-gray-100 rounded-full transition-all duration-150 hover:bg-indigo-50 hover:text-gray-900 " href="javascript:;" aria-current="page">1</a>
 <a class="w-10 h-10 bg-indigo-600 text-white p-2 inline-flex items-center justify-center rounded-full transition-all duration-150 hover:bg-indigo-600 hover:text-white" href="javascript:;">2</a>
 <a class="w-10 h-10 text-gray-500 p-2 inline-flex items-center justify-center bg-gray-100 rounded-full transition-all duration-150 hover:bg-indigo-50 hover:text-gray-900 " href="javascript:;">3</a>
 <a class="w-10 h-10 text-gray-500 p-2 inline-flex items-center justify-center bg-gray-100 rounded-full transition-all duration-150 hover:bg-indigo-50 hover:text-gray-900 " href="javascript:;">4</a>
 <a class="w-10 h-10 text-gray-500 p-2 inline-flex items-center justify-center bg-gray-100 rounded-full transition-all duration-150 hover:bg-indigo-50 hover:text-gray-900 " href="javascript:;">...</a>
 <a class="w-10 h-10 text-gray-500 p-2 inline-flex items-center justify-center bg-gray-100 rounded-full transition-all duration-150 hover:bg-indigo-50 hover:text-gray-900 " href="javascript:;">10</a>
 <a class="text-gray-500 hover:text-gray-900 p-4 inline-flex items-center md:ml-8 ml-1" href="javascript:;">
     <span>Next</span>
     <svg class="w-1.5 h-3 ml-3" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M1.5 11L5.08578 7.41421C5.75245 6.74755 6.08579 6.41421 6.08579 6C6.08579 5.58579 5.75245 5.25245 5.08579 4.58579L1.5 1" stroke="#4F46E5" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" />
     </svg>
 </a>
</nav>

Figma

You can also find this component in Figma. Check the Pagedone Figma Design System.

Preview Buy Now
image

1000+ Tailwind Blocks

Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.

Explore More