JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://manos.malihu.gr/tuts/jquery.easing.1.3.js"></script>
  <div id="wrap">
    <div id="menu"> 
    <a href="#c1">Content 1</a> 
    <a href="#c2" onClick="Animate2id('#c2'); return false">Content 2</a> 
    <a href="#c3" onClick="Animate2id('#c3'); return false">Content 3</a> 
    <a href="#c4">Content 4</a>
    <a href="#" onClick="Animate2id('#c5'); return false">Content 5</a> 
    <a href="#" onClick="Animate2id('#c6'); return false">Content 6</a> 
    </div>
  <div id="container">
    <div id="c1">
      <div class="content">Content 1</div>
    </div>
    <div id="c2">
      <div class="content">Content 2</div>
    </div>
    <div id="c3">
      <div class="content">Content 3</div>
    </div>
    <div id="c4">
      <div class="content">Content 4</div>
    </div>
    <div id="c5">
      <div class="content">Content 5</div>
    </div>
    <div id="c6">
      <div class="content">Content 6</div>
    </div>
  </div>
</div>
    <script>
    function Animate2id(id) {
    var speed = 800;
    var $container = $("#container");

    $container.stop().animate({
        "left": -($(id).position().left)
    }, speed, 'easeOutQuart');
}

$(function() {
    $('.tojquery').click(function() {
        Animate2id($(this).attr('href'));
    });
});
    </script>

CSS

html, body {
    margin: 0px;
    padding: 0px;
    height: 100%;
}
body {
    /*overflow: hidden;
    position: relative;*/
}
#menu {
    position: fixed;
    z-index: 2;
    top: 10px;
    left: 10px;
    clear: both;
    border: 1px solid #666;
    padding: 5px;
    background: #fff;
}
#menu a {
    margin-left: 5px;
    margin-right: 5px;
}
#container {
    position: relative;
    left: 0;
    width: 10000px;
    top: 0;
    height: 100%;
}
#c1, #c2, #c3, #c4, #c5, #c6 {
    width: 1500px;
    height: 100%;
    float: left;
    margin-right: 100px;
}
#c4{ width:500px;}
#c1, #c3, #c5 {
    background: #eee;
}
#c2, #c4, #c6 {
    background: #fff;
}
.content {
    padding: 60px 20px;
}
#wrap {
    width: 800px;
    border:solid 1px red;
    overflow: hidden;
    position: relative;
    margin: 0 auto 0 auto;
}

JavaScript

/*function Animate2id(id) {
    var speed = 800;
    var $container = $("#container");

    $container.stop().animate({
        "left": -($(id).position().left)
    }, speed, 'easeOutQuart');
}

$(function() {
    $('.tojquery').click(function() {
        Animate2id($(this).attr('href'));
    });
});*/