JSFiddle - React, Tailwind, and code Playground

by Linda Rian

HTML

<!--  <div class="pagination">
  <ul class="paging">
    <li class="paging__item"><a class="paging__href" href="#"> < </a></li>
    <li class="paging__item"><a class="paging__href" href="#">1</a></li>
    <li class="paging__item"><a class="paging__href" href="#">2</a></li>
    <li class="paging__item"><span class="paging__href ">3</span></li>
    <li class="paging__item"><a class="paging__href" href="#">4</a></li>
    <li class="paging__item"><a class="paging__href" href="#">5</a></li>
    <li class="paging__item"><a class="paging__href paging__href_active" href="#">6</a></li>
    <li class="paging__item"><a class="paging__href" href="#">7</a></li>
    <li class="paging__item"><a class="paging__href" href="#">8</a></li>
    <li class="paging__item"><a class="paging__href" href="#">9</a></li>
    <li class="paging__item"><a class="paging__href " href="#">10</a></li>
    <li class="paging__item"><a class="paging__href" href="#"> > </a></li>
  </ul>
 </div>
 </div> -->

<!--  <div class="pagination">
  <ul class="paging">
    <li class="paging__item"><a class="paging__href paging__href_active" href="#">1</a></li>
    <li class="paging__item"><a class="paging__href" href="#">2</a></li>
    <li class="paging__item"><span class="paging__href ">3</span></li>
    <li class="paging__item"><a class="paging__href" href="#">4</a></li>
    <li class="paging__item"><a class="paging__href" href="#">5</a></li>
    <li class="paging__item"><a class="paging__href" href="#">6</a></li>
    <li class="paging__item"><a class="paging__href" href="#"><i class="fa fa-angle-right"></i></a></li>
  </ul>
 </div>
 </div>  -->


<!-- <div class="pagination">
  <ul class="paging">
  <li class="paging__item"><a class="paging__href" href="#"> < </a></li>
    <li class="paging__item"><a class="paging__href" href="#">1</a></li>
    <li class="paging__item"><a class="paging__href" href="#">2</a></li>
    <li class="paging__item"><span class="paging__href ">3</span></li>
    <li...

SCSS

.paging {
  display: flex;
  justify-content: center;
  margin: 3rem 0;
  list-style: none;
  &__item {
    text-align: center;
    & + & {
      margin-left: 2rem;
    }
  }
  &__href {
    display: inline-block;
    width: 4rem;
    height: 4rem;
    line-height: 4rem;
    box-sizing: border-box;
    border: 1px solid #E7AF63;
    color: #1B3A51;
    font-size: 1em;
    transition: .3s all ease;
    text-decoration: none;
    & > .fa {
      font-size: 20px;
    }
    &:hover {
      border-color: #C78020;
      color: #E7B166;
    }
    &_active {
      color: #fff;
      background: #E7AF63;
      &:hover {
        color: #fff;
        border-color: #E7AF63;
      }
    }
  }
}

JavaScript

$(document).ready(function() {
  var paging = $('.paging');
  var item = paging.find('li');
  var activeItem = paging.find('.paging__href_active').parent();
  var visibleItems = [activeItem, item.first(), item.last()];

  activeItem.addClass('paging__item_active');
  item.css("display", "none");

  if (paging.children().eq(0).hasClass('paging__item_active')) {
    visibleItems.push(activeItem.next(), paging.children().eq(2));
  } else if (paging.children().eq(-1).hasClass('paging__item_active')) {
    visibleItems.push(activeItem.prev(),paging.children().eq(-3));
  } else {
    visibleItems.push(activeItem.prev(), activeItem.next());
  }

  visibleItems.forEach(function(item) {
    item.css("display", "block");
  });
});