Home
Bogdan Galin
Pagination with hover effect

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 CSS v3.

Pagination

Author Bogdan Galin

7.2k

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

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:
Amit Pachange

2 years ago

7.9k
Pagination with active page indicator

Author:
Leif99

1 year ago

11.7k
Simple Pagination

Author:
Gopi Yadav

1 year ago

9.3k
Button group

Author:
Conan Hilton

2 years ago

8.1k
Simple Pagination

Author:
Manuela Bianka

2 years ago

10k
Pagination small
Suitable for large no of pages

Author:
Prajwal Hallale

2 years ago

7.4k
Pagination
Pagination with total page and current page.

Author:
Alok

2 years ago

9.9k
Basic pagination

Author:
Sophia Baker

1 year ago

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

Author:
Leif99

1 year ago

10.2k
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

6.4k
Pagination

Author:
Anonymous

2 months ago

544
Previous and next with icons
Use the following code to show simple previous and next elements with icons. @zobaidulkazi

Author:
zobaidul kaziex

6 months ago

949

Explore components by Tags

Didn't find component you were looking for?

Search from 1800+ components