JSFiddle - React, Tailwind, and code Playground

by Harmyder

HTML

<ul class="pagination">
  <li class="page-item disabled"><button class="page-btn">prev</button></li>
  <li class="page-item active"><button class="page-btn">0</button></li>
  <li class="page-item disabled"><button class="page-btn">...</button></li>
  <li class="page-item"><button class="page-btn">9</button></li>
  <li class="page-item"><button class="page-btn">next</button></li>
</ul>

CSS

.pagination {
    display: flex;
    list-style: none;
    border-radius: 0.25rem;
}
    .pagination > .page-item {
        display: inline-block;
    }
    .pagination > .page-item > .page-btn {
        border: 1px solid red;
    }
    .pagination > .page-item > .page-btn:hover:not(:disabled):not(:active) {
        background-color: green;
    }
    .pagination > .page-item.active > .page-btn {
        background-color: blue;
        color: white;
    }
    .pagination > .page-item.disabled > .page-btn{
        border: 0px;
    }