JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" data-id="-450" class="paginate">Move to first div</a>
    <a href="#" data-id="0" class="paginate">Move to center</a>
    <a href="#" data-id="+450" class="paginate">Move to 3rd div</a>

    <div id="main-wrapper">
    <div id="inner-wrapper">
            <ul>
                <li><div id="div1" class="divstyle">this is first</div></li>
                <li><div id="div2" class="divstyle">this is second</div></li>
                <li><div id="div3" class="divstyle">this is third</div></li>
            </ul>

    </div>
   </div>

CSS

.divstyle 
    {

        text-align: center;
        width:450px;
        height:300px;
        border:1px solid #000;  


        margin: auto;
    }

    #inner-wrapper ul li
    {
        list-style:none; 
        position:relative;
        float:left;


    }
    #inner-wrapper li

    {
        display: inline;
    }


    #main-wrapper
    {
        position: relative;
        overflow:hidden;
        width:100%;
        border:1px solid #000;
        height: 350px;
        float:left;
    }

    #inner-wrapper
    {

        display: table;   /* Allow the centering to work */
        margin: 0 auto;
        position: relative;
        height: 300px;
        width:500px;
        border:1px solid #000;

        overflow: hidden;

    }
#div1 {background-color:blue;}
#div2 {background-color:green;}
#div3 {background-color:red;}

JavaScript

$('.paginate').click(function(e) {
    event.preventDefault();
  $('#inner-wrapper').animate({
   down: $(this).data("id")
  }, 3000, function() {
  // Animation complete.
  });

});