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

This tailwind example is contributed by Bogdan Galin, on 23-Aug-2023. Component is made with Tailwind v3.4.

Pagination

Author Bogdan Galin

Tailwind v3.4 8.9k 14

Fork Fullscreen

<div class="w-full h-full bg-zinc-900 flex">
  <div class="fixed bg-zinc-900 w-[300px] h-full rounded z-10 border-r border-[#3f3f3f]">
    <ul class="w-full my-4 text-white pl-10 mt-5">
      <li id="li"
        class="w-full flex cursor-pointer hover:text-[#6BAED3] pl-4 hover:pl-6 hover:bg-zinc-900 py-2 transition-all duration-300 items-center">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
          class="bi bi-person-bounding-box" viewBox="0 0 16 16">
          <path
            d="M1.5 1a.5.5 0 0 0-.5.5v3a.5.5 0 0 1-1 0v-3A1.5 1.5 0 0 1 1.5 0h3a.5.5 0 0 1 0 1h-3zM11 .5a.5.5 0 0 1 .5-.5h3A1.5 1.5 0 0 1 16 1.5v3a.5.5 0 0 1-1 0v-3a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 1-.5-.5zM.5 11a.5.5 0 0 1 .5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 1 0 1h-3A1.5 1.5 0 0 1 0 14.5v-3a.5.5 0 0 1 .5-.5zm15 0a.5.5 0 0 1 .5.5v3a1.5 1.5 0 0 1-1.5 1.5h-3a.5.5 0 0 1 0-1h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 1 .5-.5z" />
          <path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3zm8-9a3 3 0 1 1-6 0 3 3 0 0 1 6 0z" />
        </svg>
        <p class="ml-2">Profile info</p>
      </li>
      <li id="li"
        class="w-full flex cursor-pointer hover:text-[#6BAED3] pl-4 hover:pl-6 hover:bg-zinc-900 py-2 transition-all duration-300 items-center">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
          class="bi bi-shield-lock-fill" viewBox="0 0 16 16">
          <path fill-rule="evenodd"
            d="M8 0c-.69 0-1.843.265-2.928.56-1.11.3-2.229.655-2.887.87a1.54 1.54 0 0 0-1.044 1.262c-.596 4.477.787 7.795 2.465 9.99a11.777 11.777 0 0 0 2.517 2.453c.386.273.744.482 1.048.625.28.132.581.24.829.24s.548-.108.829-.24a7.159 7.159 0 0 0 1.048-.625 11.775 11.775 0 0 0 2.517-2.453c1.678-2.195 3.061-5.513 2.465-9.99a1.541 1.541 0 0 0-1.044-1.263 62.467 62.467 0 0 0-2.887-.87C9.843.266 8.69 0 8 0zm0 5a1.5 1.5 0 0 1 .5 2.915l.385 1.99a.5.5 0 0 1-.491.595h-.788a.5.5 0 0 1-.49-.595l.384-1.99A1.5 1.5 0 0 1 8 5z" />
        </svg>
        <p class="ml-2">Security</p>
      </li>
      <li id="li"
        class="w-full flex cursor-pointer hover:text-[#6BAED3] pl-4 hover:pl-6 hover:bg-zinc-900 py-2 transition-all duration-300 items-center">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-piggy-bank-fill"
          viewBox="0 0 16 16">
          <path
            d="M7.964 1.527c-2.977 0-5.571 1.704-6.32 4.125h-.55A1 1 0 0 0 .11 6.824l.254 1.46a1.5 1.5 0 0 0 1.478 1.243h.263c.3.513.688.978 1.145 1.382l-.729 2.477a.5.5 0 0 0 .48.641h2a.5.5 0 0 0 .471-.332l.482-1.351c.635.173 1.31.267 2.011.267.707 0 1.388-.095 2.028-.272l.543 1.372a.5.5 0 0 0 .465.316h2a.5.5 0 0 0 .478-.645l-.761-2.506C13.81 9.895 14.5 8.559 14.5 7.069c0-.145-.007-.29-.02-.431.261-.11.508-.266.705-.444.315.306.815.306.815-.417 0 .223-.5.223-.461-.026a.95.95 0 0 0 .09-.255.7.7 0 0 0-.202-.645.58.58 0 0 0-.707-.098.735.735 0 0 0-.375.562c-.024.243.082.48.32.654a2.112 2.112 0 0 1-.259.153c-.534-2.664-3.284-4.595-6.442-4.595Zm7.173 3.876a.565.565 0 0 1-.098.21.704.704 0 0 1-.044-.025c-.146-.09-.157-.175-.152-.223a.236.236 0 0 1 .117-.173c.049-.027.08-.021.113.012a.202.202 0 0 1 .064.199Zm-8.999-.65a.5.5 0 1 1-.276-.96A7.613 7.613 0 0 1 7.964 3.5c.763 0 1.497.11 2.18.315a.5.5 0 1 1-.287.958A6.602 6.602 0 0 0 7.964 4.5c-.64 0-1.255.09-1.826.254ZM5 6.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z" />
        </svg>
        <p class="ml-2">Balance and subscribes</p>
      </li>
      <li id="li-exit"
        class="w-full flex cursor-pointer hover:text-[#d36b6b] pl-4 hover:pl-6 hover:bg-zinc-900 py-2 transition-all duration-300 items-center">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-right"
          viewBox="0 0 16 16">
          <path fill-rule="evenodd"
            d="M10 12.5a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v2a.5.5 0 0 0 1 0v-2A1.5 1.5 0 0 0 9.5 2h-8A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-2a.5.5 0 0 0-1 0v2z" />
          <path fill-rule="evenodd"
            d="M15.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L14.293 7.5H5.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3z" />
        </svg>
        <p class="ml-2">Exit</p>
      </li>
    </ul>
  </div>
  <div class="absolute my-6 ml-4 right-0 w-[65%] h-full">
    <h1 class="text-white mt-2 text-2xl ">Profile account</h1>

<div class="w-[49%]">
            <p
              class="bg-[#1a1a1a] text-center cursor-pointer hover:bg-[#6BAED3] transition-all duration-300 px-1 py-2 rounded text-white">
              Male</p>
          </div>
          <div class="w-[49%]">
            <p
              class="bg-[#1a1a1a] text-center cursor-pointer hover:bg-[#6BAED3] transition-all duration-300 px-1 py-2 rounded text-white">
              Female</p>
          </div>

</div>
      </div>

</div>

Related Examples

Clean Pagination

Anonymous

1 year ago

1.9k
Simple Pagination

Manuela Bianka

4 years ago

12.6k
Basic pagination

Leon Bachmann

3 years ago

9.4k
Pagination
This is a simple pagination

Khalid

2 years ago

3k
Pagination small
Suitable for large no of pages

Prajwal Hallale

3 years ago

7.6k
Responsive Pagination Component with Tailwind CSS
This is a sleek and responsive pagination component built with Tailwind CSS. It features previous and next buttons, numbered pages, and an ellipsis (...) for better navigation when handling large sets of pages. The active page is highlighted with a bold border and color, while the disabled state is styled for clarity. The design is clean, minimal, and fully responsive, making it suitable for modern web applications.

SHARIFUL ISLAM

1 year ago

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

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.5k
ACODE,ASTER
love my projuct

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.4k
Pagination

Prem..

4 years ago

12.4k
Simple Pagination

Gopi Yadav

3 years ago

10.7k
Pagination with active page indicator

Leif99

3 years ago

13.9k
Employee table
Modern Unique and responsive table layout

Anonymous

1 year ago

1.4k