Home
zobaidul kaziex
Previous and next with icons

Previous and next with icons

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

@zobaidulkazi

This tailwind example is contributed by zobaidul kaziex, on 11-Jun-2024. Component is made with Tailwind CSS v3. It is responsive.

Pagination

Author zobaidul kaziex

Fork Fullscreen

<div class="flex">
  
  <a href="/previous" class="flex items-center justify-center px-3 h-8 me-3 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
    <svg class="w-3.5 h-3.5 me-2 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 5H1m0 0 4 4M1 5l4-4"/>
    </svg>
    Previous
  </a>
  <a href="/next" class="flex items-center justify-center px-3 h-8 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
    Next
    <svg class="w-3.5 h-3.5 ms-2 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
    </svg>
  </a>
</div>

Related Examples

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

1 year ago

8k
ACODE MASTER — Cyberpunk Full Stack Developer from Rwanda
"I’m ACODE MASTER — a visionary Full Stack Developer from Rwanda, blending cutting-edge tech with bold design. I specialize in building modern web applications using React, Node.js, and TailwindCSS, inspired by the cyberpunk aesthetic and driven by a passion for digital innovation. Welcome to the future of code."

Author:
Code Master(Mfuranziza Dusabe Hamza)

2 months ago

630
Pagination small
Suitable for large no of pages

Author:
Prajwal Hallale

2 years ago

7.5k
Simple rounded pagination
It has a minimalistic look with options to go to the previous and next pages and click on specific page numbers.

Author:
Diego Chavez

1 year ago

7.3k
Employee table
Modern Unique and responsive table layout

Author:
Rajesh Maheshwari

5 months ago

1.2k
Simple Pagination

Author:
Gopi Yadav

2 years ago

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

Author:
Code Master(Mfuranziza Dusabe Hamza)

2 months ago

459
Simple pagination

Author:
Elijah Davis

2 years ago

8.6k
Simple Pagination

Author:
Manuela Bianka

2 years ago

11.6k
Pagination

Author:
Anonymous

10 months ago

1.2k
Pagination round buttons

Author:
Livia Flores

2 years ago

11.5k
Previous page - Next page Buttons

Author:
Krishna Gudpalle

2 years ago

12.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components