JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://newtestsitedomain.com/sidemenu/js/waypoints.js"></script>
<body style="">
    <div id="side-nav" style="opacity: 0; ">
        <ul class="cf">
            <li><a href="#top">Home</a>
            </li>
            <li><a href="#about">About</a>
            </li>
            <li><a href="#events">Events</a>
            </li>
            <li><a class="last" href="#stay">Stay</a>
            </li>
        </ul>
    </div>

CSS

*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

html,
body {
  font-size: 100%; }

body {
  background: #ccc;
  padding: 0;
  margin: 0;
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  position: relative;
  cursor: default;
  position: relative;
  z-index: 1;
  font-family: "Museo Slab";
  min-height: 3000px;
}


#side-nav{
  float: right;
  position: fixed;
  z-index: 1000;
  background: rgba(26, 62, 95, .8);
  margin-top: 150px;
  border: 2px solid white;
  margin-left: -5px;
}

#side-nav ul{
  padding: 0;
  margin: 0;
}


#side-nav ul li{
  padding: 0;
  margin: 0;
  text-align: center;
}

#side-nav ul li a{
  display: block;
  color: #fff;
  padding: 10px;
  border-bottom: 2px solid #26578c;
}

#side-nav ul li a.last{
  display: block;
  color: #fff;
  padding: 10px;
  border-bottom: none;
}

#side-nav ul li a:hover{
  background: #608a8a;
  text-decoration: none;
}

JavaScript

$(function () {
    $('#side-nav').css('opacity', 0);
    $('#side-nav').waypoint(function () {
        $('#side-nav').animate({
            opacity: 1
        }, 'slow');
    }, {

    });
});