JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>

</head>

<body>
<div id="nav">
    <a class="abox" href="#" class="white">Box</a>
    <a id="abox1" href="#">Box-1</a>
    <a id="abox2" href="#">Box-2</a>
    <a id="abox3" href="#">Box-3</a>
</div>
<div id="box">
    box
</div>
<div id="box-1">
    box 1
</div>

<div id="box-2">
    box 2
</div>

<div id="box-3">
    box 3
</div>

</body>
</html>

CSS

body, html {
    height: 100%;
}

body {
    margin: 0px;
    padding: 0px;
}

#nav {
    width: 200px;
    height: 100px;
    background: yellow;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99999;
}
.white { background: white; }
.brown { background: brown; }
.red { background: red; }
.green { background: green; }

#box {
    width: 100%;
    height: 100%;
    float: left;
    text-align: right;
}

#box-1 {
    width: 100%;
    height: 100%;
    background: red;
    float: left;
    text-align: right;
    position: absolute;
    top: 100%;
}

#box-2 {
    width: 100%;
    height: 100%;
    background: green;
    float: left;
    text-align: right;
    position: absolute;
    top: 100%;
}

#box-3 {
    width: 100%;
    height: 100%;
    background: brown;
    float: left;
    text-align: right;
    position: absolute;
    top: 100%;
}

JavaScript

function show_box(number) {
    console.log(number);
  for(var i = 1; i <= 3; i++) {
    if (i == number) {
      $("#box-" + i).css({
        zIndex: "999"
      }).stop().animate({
        top: "0%"
      }, 1000, "easeInOutExpo");
    } else {
      $("#box-"+i).css({
        zIndex: "-999"
      }).stop().delay(1000).animate({
        top: "100%"
      });
    }
  }
}

$("#nav a").click(function() {
  var id = parseInt(this.id.substr(4));
console.log(id);
show_box(id);    
});