JSFiddle - React, Tailwind, and code Playground

HTML

<div class="input-group clearfix">
    <button class="btn active list">list</button>
    <button class="btn grid">grid</button>
</div>
<div class="pager"><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span></div>
<div class="items">
    item1 item2 item3 item4
</div>
<div class="pager clearfix"><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span></div>

CSS

.input-group{
    border:1px solid red;
    text-align:center;
}
.items{
    height:300px;
    border:1px solid #ddd;
    margin-top:50px;
    font-size:14pt;
    line-height:400px;
    text-align:center;
    color:red;
}
.btn{
    background-color: #eeeeee;
    border: 1px solid #dddddd;
    color: #555555;
    text-shadow: 1px 1px 0 #ffffff;
    font-size:15pt;
    color:red;
    padding:10px;
    margin-right:10px;
    cursor:pointer;
}
.pager{
    clear:both;
    position:relative;
    margin:10px auto;
    border:1px solid red;
}
.pager span{
    border:1px solid #ddd;
    background-color:#ddd;
    color:red;
    margin-right:10px;
    height:40px;
    width:40px;
    display:inline-block;
    text-align:center;
    line-height:40px;
}
.clearfix{
    clear:both;
}
.clearfix:after{
    clear:both;
    display:table;
    content:"";
}
.btn.active{
    background-color:red;
    color:#fff;
}

JavaScript

$(".btn").on('click',function(){
  $(".btn").toggleClass('active');  
  if($(this).hasClass('list'))
    $('.pager').hide();
  else
    $('.pager').show();
});