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

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

Leif99

3 years ago

12.2k
Simple pagination

Elijah Davis

3 years ago

9.7k
Basic pagination

Freja Jensen

3 years ago

13.5k
Back and next navigation buttons

Fagundo67

3 years ago

12.7k
Pagination

Prem..

4 years ago

12.3k
Previous page - Next page Buttons

Krishna Gudpalle

4 years ago

14.3k
Productivity Dashboard UI
A modern developer productivity dashboard built using HTML, Tailwind CSS, JavaScript, and Chart.js. Features a premium SaaS-style UI with analytics cards, interactive charts, kanban sprint board, developer management table, live search functionality, responsive layouts, activity feeds, and modern frontend components. Designed for frontend developers to showcase dashboard architecture, UI/UX skills, responsive design systems, and interactive web application interfaces. Includes glassmorphism styling, developer workflow management, team collaboration sections, and portfolio-ready dashboard components optimized for modern admin experiences.

Ayyamperumal S

4 months ago

477
My Coding Journey
To transform a standard timeline into an engaging, scroll-driven narrative experience.

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

788
Pagination small
Suitable for large no of pages

Prajwal Hallale

3 years ago

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

Indra

1 year ago

1k
Content Discovery Platform with Search & Filter
A modern, responsive web application built with Tailwind CSS that showcases content cards with search and filter functionality.

Sufyan jutt

10 months ago

730
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.

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

2k