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

2.4k

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

Author:
Leon Bachmann

3 years ago

10.6k
Pagination
Pagination with total page and current page.

Author:
Alok

3 years ago

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

Author:
Indra

5 months ago

468
ACODE,ASTER
love my projuct

Author:
Code Master(Mfuranziza Dusabe Hamza)

8 months ago

731
Responsive pagination with items per page filter
Displays previous and next pagination buttons on mobile devices

Author:
Leif99

2 years ago

11.7k
AcodeMaster GameZone – Play Your Favorite Games Online
AcodeMaster GameZone is a modern gaming website where you can discover, explore, and play exciting games anytime, anywhere. Designed with smooth animations and a stylish dark theme using Tailwind CSS, it offers a fast and fun experience for every gamer.

Author:
Code Master(Mfuranziza Dusabe Hamza)

8 months ago

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

Author:
Code Master(Mfuranziza Dusabe Hamza)

8 months ago

1k
Boutons iOS 26
Boutons iOS 26

Author:
Omer fils ELENGA

2 months ago

331
Clean Pagination

Author:
Anonymous

1 year ago

1.3k
Pagination small
Suitable for large no of pages

Author:
Prajwal Hallale

3 years ago

7.5k
Pagination - Htmlwind
Centered numbers pagination

Author:
Htmlwind

8 months ago

794
Simple Pagination

Author:
Gopi Yadav

3 years ago

10.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components