JSFiddle - React, Tailwind, and code Playground

by Academia

HTML

<div id="container">

<button class="prev styledbtn">Prev</button>
<button class="styledbtn number">1</button>
<button class="styledbtn number">2</button>
<button class="styledbtn number">3</button>
<button class="styledbtn number">4</button>
<button class="styledbtn number">5</button>
<button class="next styledbtn">Next</button>

</div>

CSS

body{
background:lavender;
}

#container{

width:300px;
height:100px;
background: whitesmoke;

}

.styledbtn{
outline:none;
border: 1px solid teal;
background:steelblue;
color: snow;
padding: 10px;
margin-right:-5px;

-webkit-transition: all 320ms cubic-bezier(0.250, 0.100, 0.250, 1.000); 
-moz-transition: all 320ms cubic-bezier(0.250, 0.100, 0.250, 1.000); 
 -o-transition: all 320ms cubic-bezier(0.250, 0.100, 0.250, 1.000); 
    transition: all 320ms cubic-bezier(0.250, 0.100, 0.250, 1.000); /* ease (default) */

-webkit-transition-timing-function: cubic-bezier(0.250, 0.100, 0.250, 1.000); 
-moz-transition-timing-function: cubic-bezier(0.250, 0.100, 0.250, 1.000); 
 -o-transition-timing-function: cubic-bezier(0.250, 0.100, 0.250, 1.000); 
    transition-timing-function: cubic-bezier(0.250, 0.100, 0.250, 1.000); /* ease (default) */
}

.styledbtn:hover{
background:skyblue;
}

.active{
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
border:2px solid midnightblue;
}

JavaScript

$(document).ready(function(){
var one = $('.number').first().addClass('active');
    $('.next').click(function(){
        if(one.next().is('.number')){
            one.removeClass('active');
            one = one.next().addClass('active');
        }
    });
    $('.prev').click(function(){
        if(one.prev().is('.number')){
            one.removeClass('active');
            one = one.prev().addClass('active');
        }
    });
});

//or this other one
/*$(document).ready(function(){
var one = $('.number').first().addClass('active');
    $('.next').click(function(){
        if(one.next('.number').length !=0){
            one.removeClass('active');
            one = one.next('.number').addClass('active');
        }
    });

    $('.prev').click(function(){
        if(one.prev('.number').length !=0){
            one.removeClass('active');
            one = one.prev('.number').addClass('active');
        }
    });
});*/